Question

我编写了一个Javascript事件监听器来捕获捕获阶段的点击，执行操作，然后重复单击以触发通常应该发生的任何代码。

var obj=document.getElementById('button');
obj.addEventListener('click', function(event){
    event.stopPropagation();
    console.log('Performing operation here');
    otherOperation('ajax', function(){
        obj.click();
    });
}, true);

显然，这会产生无限的操作循环。我认为这是最好的方法，因为操作需要时间延迟，我不能继续事件传播，直到我得到另一个回调。

有没有办法检测点击是由我自己的回调函数执行的，因此忽略它？

我有一个理论在操作完成后删除事件监听器，但是在某些情况下需要再次添加，这会产生很多代码。

Answer 1

在现代浏览器（不是IE或Safari）中使用event.isTrusted是微不足道的，只有在用户操作触发事件时才会出现这种情况

var obj=document.getElementById('button');

obj.addEventListener('click', function(event){

   if ( event.isTrusted ) {

        event.stopPropagation();
        console.log('Performing operation here');
        otherOperation('ajax', function(){
            obj.click();
        });
   } else {
       // click triggered by javascript
   }

}, true);

如果您必须支持Safari和IE9及更高版本，您可以使用自定义参数

调度该事件

var obj = document.getElementById('button');

obj.addEventListener('click', function(event) {

    if ('trusted' in event && event.trusted === false) {
        // click triggered by javascript    
    } else {

        event.stopPropagation();
        console.log('Performing operation here');

        otherOperation('ajax', function() {
            var ev = new MouseEvent('click', { // create event
                'view': window,
                'bubbles': true,
                'cancelable': true
            });

            ev.trusted = false; // add custom data
            self.dispatchEvent(ev); // trigger event
        });

    }
}, true);

jQuery事件增加了一些类似的功能，人们可以检查originalEvent以了解事件是否被触发。

Answer 2

在大多数浏览器上工作的hacky解决方案是复制按钮本身，隐藏或删除原始按钮，为新按钮添加点击处理程序，并在旧按钮上调用button.click() neccessary。

Answer 3

如果我正确理解了这个问题，那就有两个操作。 1.＆＃39;其他操作＆＃39;触发为异步呼叫2.＆＃39;正常＆＃39;操作

正常操作可以在按钮侦听器内回调时触发，也可以通过任何其他方式单独调用。以下解决方案怎么样？

var obj=document.getElementById('button');
obj.addEventListener('click', function(event){
    event.stopPropagation();
    console.log('Performing operation here');
    otherOperation('ajax', function(){
        normalOperation();
    });
}, true);

function normalOperation() {
  //normal operation to be happened for click
}

如何阻止事件回调触发？

3 个答案: