JQuery在hover（in）状态下添加click事件的多次触发现象

最新推荐文章于 2021-09-16 17:08:56 发布

tianshizhimeng155

最新推荐文章于 2021-09-16 17:08:56 发布

阅读量2.1k

点赞数 1

分类专栏： Web前端 jquery

Web前端同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

jquery

6 篇文章 0 订阅

订阅专栏

[html]view plaincopy 
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>event多次触发</title>  
 <style type="text/css">  
     .out {  
         width:100px;  
         height:100px;  
         padding:10px;  
         border:solid 1px #CCC;  
     }  
     .inner {  
         width:50px;  
         height:50px;  
         border:solid 1px #555;  
     }  
     .show {  
         background:#EEE;  
         width:200px;  
         height:200px;  
         padding:10px;  
         margin-top:20px;  
         border:solid 1px #F00;  
     }  
 </style>  
 <script type="text/javascript" src="js/jQuery-1.7.1.js"></script>  
 <script type="text/javascript">  
     $(function() {  
         var num_c = 0;  //记录click事件触发次数  
         var num_i = 0;  //记录hover（in）事件触发次数  
         var num_o = 0;  //记录hover（out）事件触发次数  
         var html = '';  //显示在.show中的信息  
         $('.out').hover(function() {  
             $(this).css('border' , 'solid 1px #F00');  
             $('.inner').click(function() {  
                 num_c += 1;  
             });  
             num_i += 1;  
         } , function() {  
             $(this).css('border' , 'solid 1px #CCC');  
             num_o += 1;  
             html += 'hover(in)触发次数为：' + num_i + '<br />';  
             html += 'hover(out)触发次数为：' + num_o + '<br />';  
             html += 'click触发次数为：' + num_c + '<br />';  
             $('.show').html(html);  
             init();  
         });  
           
         //初始化  
         function init() {  
             num_c = 0;  //记录click事件触发次数  
             num_i = 0;  //记录hover（in）事件触发次数  
             num_o = 0;  //记录hover（out）事件触发次数  
             html = '';  //显示在.show中的信息  
         }  
     });  
 </script>  
 </head>  
   
 <body>  
 <div class="out">  
     <div class="inner"></div>  
 </div>  
 <div class="show"></div>  
 </body>  
 </html>  

当第一次hover并点击的时候，click为1。

每当click一次后，下一次click触发次数将+1（不完全规律，没仔细测过，但是多次触发是一定的现象）

如图，为我click了多次后，显示的各事件触发次数。

2012-09-11 11:00

在 php-]屌丝(249722824) 的指导下，得到一个解决办法。

php-]屌丝(249722824) 10:54:36
那在这个click之前写个$('.inner').unbind('click');
取消所有click绑定

在此，非常感谢 php-]屌丝(249722824)

[plain]view plaincopy 
   
 php-]屌丝(249722824)  10:59:30  
 = =不客气。。玩js经常碰到事件冒泡  
 阻止掉或者干脆先取消事件绑定，再绑定需要的事件就可以了  
   
 php-]屌丝(249722824)  11:00:22  
 最好少用取消绑定，逻辑干净点。取消绑定多了会占用资源  
 Java+Jq→南宫(837554378)  11:01:09  
 哦。那我这个逻辑是哪里错误了吗？  
 php-]屌丝(249722824)  11:01:42  
 我在看  
 Java+Jq→南宫(837554378)  11:02:21  
 恩。  
 php-]屌丝(249722824)  11:02:34  
 你hover之后给所有inner加了一个click  
 知道？  
 Java+Jq→南宫(837554378)  11:02:49  
 恩。是啊  
 php-]屌丝(249722824)  11:03:04  
 鼠标移出去，再hover又给所有inner加了click  
 知道？  
 Java+Jq→南宫(837554378)  11:03:45  
 哦。我大概明白了。  
 就是我每hover一次，我就绑定了一次。就相当于多加了一次click  
 是这意思吧？  
 php-]屌丝(249722824)  11:04:24  
 jqeury的绑定click事件会累加  
 绑定任何事件都这样  
 Java+Jq→南宫(837554378)  11:04:44  
 .click() == .blind('click',function())??  
   
 哦哦。原来如此。受教了。  
 php-]屌丝(249722824)  11:04:53  
 就和你写多个$(function(){}) 一样  
 Java+Jq→南宫(837554378)  11:05:03  
 哦哦。  
 php-]屌丝(249722824)  11:05:04  
 先后执行  不会擦掉之前的ready  
 Java+Jq→南宫(837554378)  11:05:20  
 哦。明白了。  
 php-]屌丝(249722824)  11:05:25  
 要么逻辑干净点，要么手动取消绑定  

以上为聊天记录，觉得看记录或许比我自己复述要好些。

可能上面有些人会看的迷迷糊糊的，其实一个快捷的解决办法就是，将hover内的click事件提出来，放到hover外面，就好了，如下所示。

[plain]view plaincopy 
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 <title>event多次触发</title>  
 <style type="text/css">  
     .out {  
         width:100px;  
         height:100px;  
         padding:10px;  
         border:solid 1px #CCC;  
     }  
     .inner {  
         width:50px;  
         height:50px;  
         border:solid 1px #555;  
     }  
     .show {  
         background:#EEE;  
         width:200px;  
         height:200px;  
         padding:10px;  
         margin-top:20px;  
         border:solid 1px #F00;  
     }  
 </style>  
 <script type="text/javascript" src="js/jQuery-1.7.1.js"></script>  
 <script type="text/javascript">  
     $(function() {  
         var num_c = 0;  //记录click事件触发次数  
         var num_i = 0;  //记录hover（in）事件触发次数  
         var num_o = 0;  //记录hover（out）事件触发次数  
         var html = '';  //显示在.show中的信息  
         $('.out').hover(function() {  
             $(this).css('border' , 'solid 1px #F00');  
             num_i += 1;  
         } , function() {  
             $(this).css('border' , 'solid 1px #CCC');  
             num_o += 1;  
             html += 'hover(in)触发次数为：' + num_i + '<br />';  
             html += 'hover(out)触发次数为：' + num_o + '<br />';  
             html += 'click触发次数为：' + num_c + '<br />';  
             $('.show').html(html);  
             init();  
         });  
                   $('.inner').click(function() {  
             num_c += 1;  
         });  
   
         //初始化  
         function init() {  
             num_c = 0;  //记录click事件触发次数  
             num_i = 0;  //记录hover（in）事件触发次数  
             num_o = 0;  //记录hover（out）事件触发次数  
             html = '';  //显示在.show中的信息  
         }  
     });  
 </script>  
 </head>  
   
 <body>  
 <div class="out">  
     <div class="inner"></div>  
 </div>  
 <div class="show"></div>  
 </body>  
 </html> 

tianshizhimeng155

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery在hover（in）状态下添加click事件的多次触发现象

[html] view plain copy> html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>event多次触发title> style
复制链接

扫一扫