jQuery区分模拟事件与真实事件

2016年12月31日Web前端0

我们经常会用到jQuery中的模拟事件，来出发一些事件，以达到某种效果。但是，我们又应该如何来区分用户触发的事件与模拟事件呢？

模拟事件

以模拟用户点击为例：

#box{width:50px;height:50px;background-color:#ccc}
<body>
    <div id="box"></div>
</body>
$('#box').on('click', function(e) {
    alert('click');
});

一个宽高50px、背景色是灰色的div，绑定了一个事件。现在我们模拟用户的点击操作，来触发这个事件：

$('#box').trigger('click');

此处就不纠结其他的模拟触发的方式了。 当然，这样的话，问题就来了，我们如何区分模拟事件和真实的点击事件呢？

区分模拟事件与真实事件

方式一、event参数判断

事件回调函数中有个event参数，如果是用户的真实点击，则该对象下的clientX、clientY、pageX、pageY等属性会有数值（模拟为undefined），当然也可以通过对originalEvent属性的判断：

$('#box').on('click', function(e) {
    if ('number' == typeof e.clientX) {  // e.hasOwnProperty('originalEvent') 同样可以
        // 真实点击
    } else {
        // 模拟点击
    }
});

方式二、判断额外参数

我们可以利用回调函数中的其他参数值来判断当前是何种事件：

$('#box').on('click', function(e, action) {
    if ('imitate' == action) {
        // 模拟
    } else {
        // 真实
    }
});
$('#box').trigger('click', 'imitate');

利用第二个参数来帮助判断当前触发的是何种事件，也是一种不错的方式。

JavaScriptjQuery

目录