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

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

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

 

 

 

 

发表评论

电子邮件地址不会被公开。