jQuery 触发事件但仍有 event.isTrigger false答案

【问题标题】：jQuery Trigger event but still have event.isTrigger falsejQuery 触发事件但仍有 event.isTrigger false
【发布时间】：2013-05-14 15:32:06
【问题描述】：

jQuery 提供了一个isTrigger 属性，它可以让我们知道事件是“真实事件”还是只是“触发”。

$(ele).on("click", function(e){
    if(e.isTrigger){
       // this event was only triggered, not a real event 
    }else{
      // this was a real event 
    }
})

出于单元测试的目的，有没有办法trigger 一个事件并以某种方式覆盖isTrigger 属性.. 并且在事件回调中仍然表现（通过isTrigger === false）就好像它是一个真正的点击事件.. 正在尝试以下代码：

var triggerClick = jQuery.Event("click", {
    isTrigger:false,
    data:{
        isTrigger:false
    }

但它似乎没有正确传递它..

【问题讨论】：

标签： jquery unit-testing events

【解决方案1】：

原生方式怎么样，完全避免使用 jQuery isTrigger：

function simulateClick(elem) {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, elem,
          0, 0, 0, 0, 0, false, false, false, false, 0, null);
  if (document.createEvent) {
     elem.dispatchEvent(evt);
  } else {
     elem.fireEvent("on" + evt.eventType, evt); // support for IE crap
  }
}

要使用它，您只需：

$(ele).on("click", function(e){
    if(e.isTrigger){
       // this event was only triggered, not a real event 
       console.log('triggered');
    }else{
       // this was a real event 
       console.log('clicked');
    }
});

simulateClick(ele);

FIDDLE

【讨论】：

【解决方案2】：

如果您担心事件是由用户触发还是由代码触发，也许您应该提取一个方法并直接调用该方法。然后您可以添加一个userTriggered 参数并传递true 或false。

$(ele).on("click", function(e){
    doWork($(this), e, true);
}

doWork($(ele), null, false);

function doWork(item, e, userTriggered)
{
    if(userTriggered) {
    }
    else {
    }
}

然后，当您测试您的 doWork 方法时，您可以传入 userTriggered 作为 true 或 false 来测试所需的行为。这也消除了您的测试对浏览器行为的依赖性，这是一件好事。

【讨论】：

一般来说这是一个好主意，但是为什么过度模块化代码只是为了测试它是否可以以更好的方式完成这个唯一目的..
我认为这种方法比模拟用户点击更清晰。这消除了不必要的事件处理程序触发，并允许您直接调用所需的功能。它不仅可能更高效，而且更易于阅读。

【解决方案3】：

@adeneo 的回答给了我错误。（未捕获的 TypeError：无法在“MouseEvent”上执行“initMouseEvent”：参数 4 不是“Window”类型。）

这个方法对我有用（虽然 isTriggered 是未定义的，不是假的）

$('#myBtn').on('click', function(e){
  alert('isTrigger: ' + e.isTrigger)
});

 var event = new Event('click');
$( "#myBtn" )[0].dispatchEvent(event);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="myBtn">dude</a>

【讨论】：