2

そのため、いくつかのボタンに通常の onclick イベントが関連付けられており、onclick イベントを処理する各関数は異なる処理を行います (したがって、両方のイベントに同じ関数を再利用することはできません)。

element1.onclick = function() {
    if(this.classList.contains('disabled') {
        return false;
    }
    // For example make an AJAX call
};

element2.onclick = function() {
    if(this.classList.contains('disabled') {
        return false;
    }
    // For example hide a div
};

私はこの「無効化された」クラス チェックの重複したコードを書いています。一般的な onclick チェックをフックしてこれを排除し、そのチェックに合格した場合は通常の onclick イベントを発生させたいと考えています。

以下が機能しないことはわかっていますが、私がやろうとしていることを説明すると思います：

document.addEventListener('click', function() {
    // 1. Do the disabled check here
    // 2. If the check passes delegate the event to the proper element it was invoked on
    // 3. Otherwise kill the event here
});

私はJavaScriptライブラリを使用しておらず、誰かが「jQueryを使用するだけ」タイプの回答を思いついた場合に備えて、使用する予定もありません.

編集: ブール値の 3 番目の引数を addEventListener に true として渡す必要があり、すべて問題ありません。

4

3 に答える 3

4

次のように、イベント キャプチャを使用します。

document.addEventListener('click', function(event) {
    if (/* your disabled check here */) {
      // Kill the event
      event.preventDefault();
      event.stopPropagation();
    }

    // Doing nothing in this method lets the event proceed as normal
  },
  true  // Enable event capturing!
);
于 2012-12-10T13:47:34.723 に答える
1

captureフラグをtrueに設定.stopPropagation()し、ターゲットで特定の条件が満たされた場合にイベントで使用する必要があるようです。f.ex：

document.addEventListener('click', function(e) {
    if ( condition ) {
        e.stopPropagation();
        // do soemthing else, the default onclick will never happen
    }
}, true);​​​​​​​​​​​​​​​​​​​​​​

これがデモです：http：//jsfiddle.net/v9TEj/

于 2012-12-10T13:44:31.617 に答える
1

コールバックを受け取る汎用関数を作成できます。

//check everything here
function handleOnclick(callback) { 
    if(this.classList.contains("disabled")) {
       return false;
    } else {
     callback(); //callback here
    }
}

//and now on every onclick, just pass the custom behavior

element1.onclick = function() {
   handleOnClick(function() { 
        console.log('element1 onclick fire'); // For example hide a div
    });
};


element2.onclick = function() {
   handleOnClick(function() { 
        console.log('element2 onclick fire'); // For example ajax request
    });
};

編集 あなたの最新のコメントに基づいて、この書き直しがうまくいくかどうか教えてください...今回は入札は1つだけです。

element1.customFunction = function() {
   handleOnClick(function() { 
        console.log('element1 onclick fire'); // For example hide a div
    });
};

element2.customFunction = function() {
   handleOnClick(function() { 
        console.log('element2 onclick fire'); // For example ajax request
    });
};

document.addEventListener('click', function() {
   //1. grab the element
   //2. check if it has the customFunction defined
   //3. if it does, call it, the check will be done inside
};
于 2012-12-10T13:41:19.650 に答える