0

現在、このコードを使用して、Google Chrome 拡張機能でイベントをバインドしています。

var bindEvent = function(elem ,evt,cb) {
    //see if the addEventListener function exists on the element
    if ( elem.addEventListener ) {
        elem.addEventListener(evt,cb,false);
    //if addEventListener is not present, see if this is an IE browser
    } else if ( elem.attachEvent ) {
        //prefix the event type with "on"
        elem.attachEvent('on' + evt, function(){
            /* use call to simulate addEventListener
             * This will make sure the callback gets the element for "this"
             * and will ensure the function's first argument is the event object
             */
             cb.call(event.srcElement,event);
        });
    }
};

/* ... */

bindEvent(document,'click', function(event) 
{ var target = event.target || event.srcElement;
    
    /*Code to do stuff about a clicked element*/

    this.removeEventListener('click',arguments.callee,false);
});

また、クリックイベントでうまく機能します。さて、私の質問は次のとおりです。単純にクリックするのではなく、ホバーされている要素について何かを変更するには、どのイベントを使用できますか? 最終的な目標は、カーソルが置かれている要素の背景色を変更することです。

mouseover、mouseenter、focusを試してみましたが、うまくいきfocusinませんでした。正確には、イベントがトリガーされたときに実行しようとしましたconsole.log()が、ダイアログ ボックスをクリックしてこの要素へのフォーカスが検出されたときを除いて、実際には発生しませんでした。

私は現在 Chrome (v24.0) を使用していますが、後で Firefox でスクリプトを再利用する予定であるため、クロスブラウザー ソリューションは優れた機能です。それは最優先事項ではありませんが。

4

1 に答える 1

2

ホバリングに関連するイベントはmouseoverとmouseoutです。これらは、マウスが要素に入ったとき、または要素から離れたときにそれぞれトリガーされます。ただし、そのイベントは、リスナーをアタッチした要素の子要素に対してもトリガーされ、これらのイベントがバブルアップするため、次のことも確認する必要がありますevent.target。

elem.addEventListener("mouseover", function(event) {
  if (event.target == elem) {
    // Mouse pointer entered elem
  }
}, false);

elem.addEventListener("mouseout", function(event) {
  if (event.target == elem) {
    // Mouse pointer left elem
  }
}, false);
于 2013-05-30T15:25:48.337 に答える