問題mouseoutイベント

StackOverflow https://stackoverflow.com/questions/49630

質問

私が使っているwebブラウザでJavaScriptの実行を非表示画像やテキストの私が現われます。ただし、テキストを表示した場合にスクロールで、火災のmouseoutイベントのコンテナにそれを隠しテキスト、画像、すでに入ってくる。

Htmlのようになります:

<div onmouseover="jsHoverIn('1')"
     onmouseout="jsHoverOut('1')">
    <div id="image1" />
    <div id="text1" style="display: none;">
        <p>some content</p>
        <p>some more content</p>
    </div>
</div>

のjavascriptで利用scriptaculous):

function jsHoverIn(id) {
  if(!visible[id]) {
    new Effect.Fade ("image" + id, {queue: { position: 'end', scope: id } });
    new Effect.Appear ("text" + id, {queue: { position: 'end', scope: id } });
    visible[id] = true;
  }
}
function jsHoverOut (id) {
  var scope = Effect.Queues.get(id);
  scope.each(function(effect) { effect.cancel(); });

  new Effect.Fade ("text" + id, {queue: { position: 'end', scope: id } });
  new Effect.Appear ("image" + id, {queue: { position: 'end', scope: id } });
  visible[id] = false;
}

このようにシンプルでかんを包んであるといわれている。

役に立ちましたか？

解決

いいえ、コンテナ事業部:

position: relative;

に、第三部のコンテナの最後の子のコンテナなし)：

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

のmouseoverとmouseoutのイベントをこの部門です。

でも子を持っていない要素、まだ不mouseoverとmouseoutイベントの伝播します。

編集：

だと思っていうのは、その時にカーソルの移動から親要素を子要素には、mouseoutイベントが発生すると、親要素、mouseover事由が発生し、子要素になります。ただし、mouseoverハンドラの子要素ませんのイベントを停止で伝播するには、親要素た取り組みを行っています。は、mouseoverイベントです。

他のヒント

るように聞こえるようですが mouseenter/mouseleave (IE独自のイベントが簡単に模倣):

// Observe mouseEnterLeave on mouseover/mouseout
var mouseEnterLeave = function(e) {
    var rel = e.relatedTarget, cur = e.currentTarget;
    if (rel && rel.nodeType == 3) {
        rel = rel.parentNode;
    }
    if(
        // Outside window
        rel == undefined ||
        // Firefox/other XUL app chrome
        (rel.tagName && rel.tagName.match(/^xul\:/i)) ||
        // Some external element
        (rel && rel != cur && rel.descendantOf && !rel.descendantOf(cur))
    ) {
        e.currentTarget.fire('mouse:' + this, e);
        return;
    }
};
$(yourDiv).observe('mouseover', mouseEnterLeave.bind('enter'));
$(yourDiv).observe('mouseout', mouseEnterLeave.bind('leave'));

// Use mouse:enter and mouse:leave for your events
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseenter' : 'mouse:enter', yourObserver);
$(yourDiv).observe(!!Prototype.Browser.IE ? 'mouseleave' : 'mouse:leave', yourObserver);

または、 パッチprototype.js -利用 mouseenter や mouseleave ります。ているので注意してほしのチェックのためのウィンドウで入力XUL chrome;このために一部修正のエッジケースでFirefoxでした。

このあたり最良の解決策が果たすことができるのであろうかグローバルブ可変えードウェアやソフトウェアの両方の方法だけを指定する場合のためHoverInはHoverOut.を使用できるこのbooleanに変るかどうかを判断するコードを動かして行く必要がある。 

if (bWasHoverIn){
   ...
}

なのonmouseoverイベントの画像事業部を、onmouseoutイベントのテキストの部?

@ライアンのbooleanのだが、本当に助けするだけで回避のループが、mouseoverイベントが発火し、テキストが飛伝.

@ブライアンで、そういうものでしょ、同様に進めていく考えです。

くなった場合はこれに合わせて、トッパンフォームズのスタイリングも変更した場合は、cssのテキスト部門で同じサイズのイメージや固定のサイズの外部の場合、mouseoverイベントが発のサイズ、外部かいについては、必要に応じて原因のmouseoutイベントです。

こしょう？

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top