<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>测试用户点击和js点击</title> <script src='jquery-1.10.2.min.js'></script> </head> <body> <button id="btn">Click</button> <script> // 来源：http://www.zhihu.com/question/31259853 $(document).ready(function(){ // 方式1 a(); // 方式2 // b(); // b2(); // 方式3 // c(); // 方式1：btn.click.caller function a() { var btn = $('#btn'); // 赋予事件 btn.click(function() { console.log(btn.click.caller); if(null === btn.click.caller) { // 用户点击的 alert('用户点击了'); }else { // JS代码调的 alert('JS点击了'); } }); btn.click(); } // 方式2: e.originalEvent（jquery） function b(){ var btn = $('#btn'); // 赋予事件 btn.click(function(event) { // event.originalEvent => MouseEvent if(event.originalEvent) { // 用户点击的 alert('用户点击了'); }else { // JS代码调的 alert('JS点击了'); } }); btn.click(); } // 方式2：pageX, clientX（原生js），也阔以是offsetX/layerX/screenX function b2(){ // 原生js实现 var btn2 = document.getElementById('btn'); // DOM0级事件实现 btn2.onclick = function(event){ if (event.pageX){ alert('用户点击了'); }else{ alert('JS点击了'); } } btn2.click(); } // 方式3: event.isTrusted IE9+/firefox支持 function c(){ var btn = $('#btn'); // 赋予事件 btn.click(function(event) { // event.originalEvent => MouseEvent if(event.isTrusted) { // 用户点击的 alert('用户点击了'); }else { // JS代码调的 alert('JS点击了'); } }); btn.click(); } }); </script> </body> </html>
JS 区别用户点击事件和控制台点击事件
42 min read