如何阻止事件回调触发？

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是否触发了事件.