【问题标题】:Check if event is triggered by a human检查事件是否由人触发
【发布时间】:2011-07-14 10:50:43
【问题描述】:

我有一个附加到事件的处理程序,我希望它仅在由人触发而不是由 trigger() 方法触发时执行。如何区分?

例如,

$('.checkbox').change(function(e){
  if (e.isHuman())
  {
    alert ('human');
  }
});

$('.checkbox').trigger('change'); //doesn't alert

【问题讨论】:

    标签: javascript jquery


    【解决方案1】:

    您可以检查e.originalEvent:如果定义了点击是人为的:

    看小提琴http://jsfiddle.net/Uf8Wv/

    $('.checkbox').change(function(e){
      if (e.originalEvent !== undefined)
      {
        alert ('human');
      }
    });
    

    我在小提琴中的例子:

    <input type='checkbox' id='try' >try
    <button id='click'>Click</button>
    
    $("#try").click(function(event) {
        if (event.originalEvent === undefined) {
            alert('not human')
        } else {
            alert(' human');
        }
    
    
    });
    
    $('#click').click(function(event) {
        $("#try").click();
    });
    

    【讨论】:

    • @Nicola 这在任何地方都有记录吗?
    • @Sime 我不知道,但我认为这是标准的。看这里:api.jquery.com/category/events/event-object
    • @Nicola 我明白了,这是一个 jQuery 的东西。 jQuery 将原始事件对象存储在此属性中。顺便说一句,你不知道是什么意思?您刚刚提供了文档的链接:)
    • 看来你也可以用event.isTrigger
    • @Anurag,我刚才遇到了同样的问题。当事件由DOM.click() 触发时,jQuery 会填充originalEvent,但您可以使用$($("#try")[0]).click();,这很笨重,但可以。
    【解决方案2】:

    比上面更直接的是:

    $('.checkbox').change(function(e){
      if (e.isTrigger)
      {
        alert ('not a human');
      }
    });
    
    $('.checkbox').trigger('change'); //doesn't alert
    

    【讨论】:

    【解决方案3】:

    目前大部分浏览器都支持event.isTrusted:

    if (e.isTrusted) {
      /* The event is trusted: event was generated by a user action */
    } else {
      /* The event is not trusted */
    }
    

    来自docs

    Event 接口的 isTrusted 只读属性是 Boolean 当事件由用户操作生成时为 true,而 false 当事件由脚本创建或修改或通过 EventTarget.dispatchEvent().

    【讨论】:

      【解决方案4】:

      我认为这样做的唯一方法是根据documentationtrigger 调用上传递一个附加参数。

      $('.checkbox').change(function(e, isTriggered){
        if (!isTriggered)
        {
          alert ('human');
        }
      });
      
      $('.checkbox').trigger('change', [true]); //doesn't alert
      

      示例:http://jsfiddle.net/wG2KY/

      【讨论】:

      【解决方案5】:

      接受的答案对我不起作用。 6 年过去了,jQuery 从那时起发生了很大的变化。

      例如,event.originalEvent 在 jQuery 1.9.x 中总是返回 true。我的意思是对象总是存在但内容不同。

      那些使用较新版本 jQuery 的人可以试试这个。适用于 Chrome、Edge、IE、Opera、FF

      if ((event.originalEvent.isTrusted === true && event.originalEvent.isPrimary === undefined) || event.originalEvent.isPrimary === true) {
          //Hey hooman it is you
      }
      

      【讨论】:

        【解决方案6】:

        如果您可以控制所有代码,则不会有外来电话 $(input).focus()setFocus()

        使用全局变量对我来说是正确的方法。

        var globalIsHuman = true;
        
        $('input').on('focus', function (){
            if(globalIsHuman){
                console.log('hello human, come and give me a hug');
            }else{
                console.log('alien, get away, i hate you..');
            }
            globalIsHuman = true;
        });
        
        // alien set focus
        function setFocus(){
            globalIsHuman = false;
            $('input').focus();
        }
        // human use mouse, finger, foot... whatever to touch the input
        

        如果某个外星人仍想从另一个星球呼叫$(input).focus()。 祝你好运或检查其他答案

        【讨论】:

        • 这只会阻止人们调用setFocus() - 它不会阻止人们触发焦点事件。根本不写setFocus() 也会阻止人们调用它,所以我看不到它的好处。事实上,人们仍然可以拨打$('input').focus() 并让它通过。
        • 哇,我第一次回答问题后有人评论,我会更新答案
        • 如果您在没有其他/第 3 方脚本的封闭环境中工作,这将在一个完美的世界中工作。然而,大多数实际应用程序都适用于添加了各种插件和脚本的客户端站点,这很可能称为焦点。可能对此有所帮助的一件事是将您的代码(以及需要调用该函数的任何代码)包装在一个范围函数中,如下所示:(function(){/*your code here*/})(); 这将使 setFocus 函数不会被调用并且布尔值不会被外部更改脚本。
        【解决方案7】:

        您可以使用 onmousedown 来检测鼠标点击和 trigger() 调用。

        【讨论】:

        • 我可能无法处理以下情况:有时可以使用 Tab 键选择页面元素。例如,如果我以这种方式选择了一个复选框,我可以使用空格键选中/取消选中。甚至可以使用向下箭头键打开下拉菜单。
        【解决方案8】:

        我会考虑检查鼠标位置的可能性,例如:

        • 点击
        • 获取鼠标位置
        • 重叠按钮的坐标
        • ...

        【讨论】:

        • 我可能无法处理以下情况:有时可以使用 Tab 键选择页面元素。例如,如果我以这种方式选择了一个复选框,我可以使用空格键选中/取消选中。甚至可以使用向下箭头键打开下拉菜单。
        猜你喜欢
        • 1970-01-01
        • 2013-07-31
        • 2014-04-01
        • 1970-01-01
        • 1970-01-01
        • 2021-06-06
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多