禪達的愛

公告

網頁中，鼠標點擊與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>

posted on 2017-07-11 16:33 禪達的愛閱讀(1545) 評論(0) 收藏舉報

刷新頁面返回頂部