前端多次绑定click的坑

前端坑
绑定踩过的click的坑
111111
做前端几个月，真的是各种坑都有，今天就来聊聊这几天遇到的多次绑定click遇到的坑。留下一些自己的记录！！
首先是HTML这块
这个是一个翻牌子的游戏界面是这样的

然后是HTML部分的

<div class="weui-grids" id="draw"><a href="javascript:;" id="1" class="weui-grid"><div class="click" id="fugai1"><p class="clickMe">点我翻牌</p></div><div class="back"><img class="info" src="ldimg/jieguo/1.png" alt="" id="jieguo1" ><p class="back-info" id="jguo1"></p></div></a><a href="javascript:;" id="2" class="weui-grid"><div class="click" id="fugai2"><p class="clickMe">点我翻牌</p></div><div class="back"><img class="info" src="" alt="" id="jieguo2"><p class="back-info" id="jguo2"></p></div></a><a href="javascript:;" id="3" class="weui-grid"><div class="click" id="fugai3"><p class="clickMe">点我翻牌</p></div><div class="back"><img class="info" src="" alt="" id="jieguo3"><p class="back-info" id="jguo3"></p></div></a><a href="javascript:;" id="4" class="weui-grid"><div class="click" id="fugai4"><p class="clickMe">点我翻牌</p></div><div class="back" ><img class="info" src="" alt="" id="jieguo4"><p class="back-info" id="jguo4"></p></div></a><a href="javascript:;" id="5" class="weui-grid"><div class="click" id="fugai5"><p class="clickMe">点我翻牌</p></div><div class="back"><img class="info" src="" alt="" id="jieguo5"><p class="back-info" id="jguo5"></p></div></a><a href="javascript:;" id="6" class="weui-grid"><div class="click" id="fugai6"><p class="clickMe">点我翻牌</p></div><div class="back"><img class="info" src="" alt="" id="jieguo6"><p class="back-info" id="jguo6"></p></div></a><a href="javascript:;" id="7" class="weui-grid"><div class="click" id="fugai7"><p class="clickMe">点我翻牌</p></div><div class="back"><img class="info" src="" alt="" id="jieguo7"><p class="back-info" id="jguo7"></p></div>       </a><a href="javascript:;" id="8" class="weui-grid"><div class="click" id="fugai8"><p class="clickMe">点我翻牌</p></div><div class="back"><img class="info" src="" alt="" id="jieguo8"><p class="back-info" id="jguo8"></p></div></a><a href="javascript:;" id="9" class="weui-grid"><div class="click" id="fugai9"><p class="clickMe">点我翻牌</p></div><div class="back"><img class="info" src="" alt="" id="jieguo9"><p class="back-info" id="jguo9"></p></div></a>
</div>

下面的函数是一开始的时候我对标签a绑定click事件的。
然后在初始化的时候这个函数执行了两次（声明这块不是我写的）

var turn = function (target, time, opts) {  target.find('a').click(function (e) {console.log("clickstate:"+clickstate);if (clickstate == 1) {return;}if(clickstate == 0){$("#draw a").css("background","none");}clickstate = 1;$("#toOneAgain").removeAttr("onclick");var current = $(this);var pos = $(this).context.id;toLottery($(this),time, opts,pos);});}

其实你看上去上面的代码是没有什么错误的各种功能执行的好好的，完全没有bug出现，但是我们老大让我优化一下就是当你第一次点击的时候会有点击效果，如果不再来一次就不能有点击效果。于是我各种查资料看资料。点击效果出现的原因是在标签a中设置了-webkit-tap-highlight-color: rgba(0,0,0,0);。。。。。。
于是我就想呀，当你第一次点击的时候使得上面这个属性失效（根据clickstate判断）；然后再来一次进行初始初始化的时候再加上这个属性就行；but依然不行，各种使用各种方法，我在上面这个函数里面加了console.log("cliclkstate:"+clickstate);
打印的时候发现我首次点击，输出的两行分别是0和1，然后第二次点击的时候出现了三行分别是0 1 1，第三次点的时候是四行，分别是0  1 1 1，一直点下去就一直加，我方了
一开始以为是冒泡的原因，但是找来找去，我再怎么冒泡应该只能冒2层的，那么最多输出2行呀！

痛苦ing

然后花了n久时间去查呀，试试代码。最终百度了一下绑定click，发现click事件是可以多次绑定的，并且同时起作用。
于是上述诡异的事件发生的原因是，一开始的时候a标签绑定click事件绑了两次，我第一次点击会执行两次click事件，然后我点再来一次的时候click事件又多绑定了一次，这个时候再点a标签区域的时候click事件会执行三次，依次下去就发生了刚刚那个诡异的事情。。。终于圆满解决了。解决办法如下
target.find(‘a’).unbind(“click”).click(function (e) {
console.log(“clickstate:”+clickstate);
if (clickstate == 1) {
return;
}
if(clickstate == 0){
$("#draw a").css(“background”,“none”);
}
clickstate = 1;
$("#toOneAgain").removeAttr(“onclick”);
var current = $(this);
var pos = (this).context.id;toLottery((this).context.id; toLottery((this).context.id;toLottery((this),time, opts,pos);
});
}

然后对于去掉上图点击时候出现的这种白色边框问题，一开始我是将-webkit-tap-highlight-color: 各种设置都没有用，最终设置KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲draw a").css("b…("#draw a").css(“background”,"");一开始的时候我认为还不行，这个不就是设置吗，怎么能说是去掉列。。。不管先试试，结果有效果了。。。。

前端多次绑定click的坑相关推荐

jQuery的on绑定click和直接绑定click区别
状况之外在之前的公司并没有遇到这个问题,也就没有深究.直到自己换了现在的公司,刚来第二天就开始写别人写到一半的项目,很无奈,不是原生就是jquery,由于项目急,已经来不及切换框架重新布局,只能继续 ...
jquery单选框radio绑定click事件实现和是否选中的方法
使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...
单选框radio绑定click事件
2019独角兽企业重金招聘Python工程师标准>>> <html><head><title>单选框radio绑定click事件</titl ...
IE下列表框不能给option绑定click事件的解决办法
列表框代码 <select size="3" ><option>Option1</option><option>Option2< ...
vue 移动端在div上绑定click事件失效
在.vue的文件中使用了better-scroll,在div标签上绑定click事件后,无效. 原因:使用了better-scroll,默认它会阻止touch事件.所以在配置中需要加上click: t ...
dom绑定click事件无效及解决办法
一般情况下在同一个界面里面基本不会绑定无效的 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
原生js绑定click为什么点一次执行两次_前端小知识10点(2020.10.8)
1.redux的compose实现例: const add = num => num + 10 const multiply = num => num * 2 const foo = c ...
2017年前端工作小结，个人踩坑之旅，前端学习者的杂谈
工作差1月就要满一年了,这一年中水平并没有直接性的提升,以至于初学前端时无法探究的诸多问题,依旧没有头绪,但工作就是的一次次跳坑和爬坑,它终究是带给了我一些... 关于工作,在一家创业公司(没人带-_ ...
java绑定click时间_JAVA面试之vue.js(一)
1.vue的优点有哪些. 答:首先介绍一下vue的特点:响应式编程和组件化: 再介绍一下vue的优点: a. 轻量级框架 b. 简单易学 c. 双向数据绑定 d. 组件化 e. 视图 f. 数据和结构 ...

前端多次绑定click的坑

前端多次绑定click的坑相关推荐

最新文章

热门文章