网页中，鼠标点击与javascript的click事件怎么区分处理
就下面问题发现另一个方式：
js代码：
<script> //IE if(document.all) { document.getElementById("clickme").click(); } // 其它浏览器 else { var e = document.createEvent("MouseEvents"); e.initEvent("click", true, true); document.getElementById("clickme").dispatchEvent(e); } </script>
-----------------------------------------
开发中遇到分组的复选框的情况，当组内全部选中后组名自动选中，实现组名和组元素的联动效果。
下面是第一次demo，只进行联动效果
1 <!doctype html> 2 <html > 3 <head> 4 <meta charset="utf-8" /> 5 <title> 6 new document 7 </title> 8 <script type="text/javascript" src="jquery-1.8.3.js"> 9 </script> 10 <script type="text/javascript"> 11 $(function() { 12 $("li input[name='input_list']").click(function() { 13 var counts = $("li input[name='input_list']").length; 14 var checkcounts = $("li input[name='input_list']:checked").length; 15 if (counts == checkcounts) { 16 $("#chkAllFlags").attr("checked", true); 17 } else { 18 $("#chkAllFlags").removeAttr("checked"); 19 } 20 }) 21 22 $("input[flag='1']").click(function() { 23 var checktemp = $(this).attr('checked'); 24 if (checktemp == undefined) checktemp = false; 25 $("input[name='input_list']").each(function() { 26 $(this).attr('checked', checktemp) 27 }); 28 //alert($("input[flag='1']").attr('checked')); 29 }); 30 31 }) 32 </script> 33 <style> 34 ul{ 35 width:600px; 36 list-style:none; 37 line-height:20px; 38 line-height:20px; 39 } 40 .advancExpand02ul li{ 41 list-style-type:none; 42 float:left; 43 width:150px; 44 line-height:20px; 45 margin-right:5px; 46 } 47 </style> 48 </head> 49 <body> 50 <div class="advancExpand02" id="salesFlagList"> 51 <div class="advancExpand01"> 52 <span> 53 <input type="checkbox" class="checkboxN5 checkboxNhover" id="chkAllFlags" 54 flag="1" name="input_list"> 55 </span> 56 <span> 57 特销 58 </span> 59 </div> 60 <div class="advancExpand02Con" id="salesFlagSubList" > 61 <ul class="advancExpand02ul"> 62 <li> 63 <input type="checkbox" flag="2" name="input_list"><span>北京师范大学</span> 64 </li> 65 <li> 66 <input type="checkbox" flag="4" name="input_list"><span>和平里第四小学</span> 67 </li> 68 <li> 69 <input type="checkbox" flag="8" name="input_list"><span>北师大燕华附中</span> 70 </li> 71 </ul> 72 </div> 73 </div> 74 </body> 75 </html>
但是当再次进入页面要求把选中内容复现时，组名联动效果失效，组元素已经全部选中，但是触发的click事件中 checkcounts值为选中的复选框数量减一，无法触发联动效果（我使用的是jQuery的click()方法）
知乎看到的分析：
两种方式，事件监听函数的caller属性不一样：手动点击是null；Js点击是一个函数(但必须把click()方法的调用放到一个函数中，不能在全局作用域中直接调用，否则也是null)。
作者：匿名用户 链接：https://www.zhihu.com/question/31259853/answer/51728450 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 <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>
