JQuery在hover(in)状态下添加click事件的多次触发现象 本帖最后由 qinglinglaoren 于 2012-09-11 10:24:52 编辑 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 已找到解决方案。详情请查看http://blog.csdn.net/qinglinglaoren/article/details/7965825 $('.out').hover(function() { $(this).css('border' , 'solid 1px #F00'); $('.inner').click(function() { num_c += 1; $('.show').html(num_c); });很明显这里出问题,你每hover一次就给$('.inner')添加一次click事件,所以你第一次触发hover事件后执行的点击事件结果是正确的,接下第二次hover后每点击一次它会执行两次click事件,一次类推。改为下面的就行了 <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中的信息 $('.inner').click(function() { num_c += 1; $('.show').html(num_c); }); $('.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(); }); //初始化 function init() { num_c = 0; //记录click事件触发次数 num_i = 0; //记录hover(in)事件触发次数 num_o = 0; //记录hover(out)事件触发次数 html = ''; //显示在.show中的信息 } }); </script> 看了他解决方案里的聊天记录,就是说他原本想要的是每次点击触发一次click事件,然后num_c加1。但是他的代码有问题,然后每次触发hover的时候就会多绑定一次click事件,导致的结果是每次点击触发click事件就是触发N次,num_c的值加了N 冒泡了?在接着这句 num_i += 1; 下面加一句 return false; 再试一下或是把hove改为mouseenter好像 return false;已经尝试过了,是不可行的。至于hover改为mouseenter,效果应该是不会有变化的。你可以看看我上面提出的解决方案。 JS输出DIV的绝对定位 急,急,急,xtree如何用啊,我是要实现一个节点ID确定的高效动态树 一个JS控制问题 如何抓取系统时间 |zyciis| Jquery有没有取URL传参的功能, 谢谢 省市区,三级联动,修改的时候,怎样,获取相应的值 急问题!怎么在javascript里读取库啊!! 如何在图片隐藏的状态下知道它的大小? 同一个页面两处js冲突了,请高手指点,谢谢! 新手求教,这里的表单为何会提交? ext4设置按钮默认宽度为何无效? HTML5 游戏 West Fighting, 西途决斗 - 原创
$('.out').hover(function() {
$(this).css('border' , 'solid 1px #F00');
$('.inner').click(function() {
num_c += 1;
$('.show').html(num_c);
});很明显这里出问题,你每hover一次就给$('.inner')添加一次click事件,所以你第一次触发hover事件后执行的点击事件结果是正确的,接下第二次hover后每点击一次它会执行两次click事件,一次类推。改为下面的就行了
<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中的信息
$('.inner').click(function() {
num_c += 1;
$('.show').html(num_c);
});
$('.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();
}); //初始化
function init() {
num_c = 0; //记录click事件触发次数
num_i = 0; //记录hover(in)事件触发次数
num_o = 0; //记录hover(out)事件触发次数
html = ''; //显示在.show中的信息
}
});
</script>
在接着这句 num_i += 1; 下面加一句
return false; 再试一下
或是把hove改为mouseenter好像
return false;已经尝试过了,是不可行的。
至于hover改为mouseenter,效果应该是不会有变化的。
你可以看看我上面提出的解决方案。