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

发布时间：2020-12-14 23:51:19 所属栏目：资源来源：网络整理

导读：我们经常会用到jQuery中的模拟事件，来出发一些事件，以达到某种效果。但是，我们又应该如何来区分用户触发的事件与模拟事件呢？模拟事件以模拟用户点击为例： #box{width:50px;height:50px;background-color:#ccc}body div id="box"/div/body$('#box').on

我们经常会用到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');

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!