jQuery触发事件但仍保持event.isTrigger为false

Question

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 
    }
}) 

为了进行单元测试，有没有一种方法可以触发事件并以某种方式覆盖isTrigger属性.. 并且在事件回调中仍然表现得像是真正的点击事件（通过具有isTrigger === false）.. 尝试以下代码：

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

但它似乎没有正确地通过它...

- adardesign

Answer 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

- adeneo

Answer 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 来测试所需的行为。这也可以消除测试中浏览器行为的依赖性，这是一件好事。

- cadrell0

---

一般来说这是个好主意，但为了测试而过度模块化代码是否有更好的方法可以实现呢？ - adardesign

我认为这种方法比模拟用户点击更清晰。这样可以避免不必要的事件处理程序触发，并允许您直接调用所需的功能。它不仅可能更有效，而且更易于阅读。 - cadrell0

Answer 3

@adeneo的回答给了我错误。(未捕获的类型错误:在'MouseEvent'上执行'initMouseEvent'失败:参数4不是'type'的类型。)

这种方法对我有用(虽然isTriggered未定义，而不是false)

$('#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>

- Claytronicon