javascript - 重复绑定事件问题
本文介绍了javascript - 重复绑定事件问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我想在点击一个div后显示边框并且能够改变它的svg子元素中的元素
for(var j=0;j<divList.length;j++){
(function(el){
divList[el].onclick=function(){
gg=divArray[el];//gg为选中的元素的svgdocument
init(gg);//将选中的元素传入函数进行修改
};
})(j);
}
function init(elem){
var mouthSetting=document.getElementById("mouthSet");
//mouthsetting为range滚动条的ID
var svgMouth=elem.getElementById("mouth");
//获取svg的某个子元素
mouthSetting.addEventListener("change",test,false);
//为range绑定事件
function test(){
svgMouth.setAttribute("d","M 40 115 Q 60 "+this.value*150+" 75 115");}
但问题是当我打开文件第一次点击某个图像时。是可以通过range调整嘴巴的角度,但当我选择另外一个图像时,调整range,两个图像的嘴巴角度都会变化!!
请问这是为什么?绑定事件为什么会重复?新手求助~谢谢
解决方案
你为同一个元素(mouseSetting)绑定了 n 个 "change"
事件,其实质是为这个元素的 change 事件添加了 n 个处理函数,当这个元素发生改变时,会遍历所有 change 处理函数,依次调用。所以就出现了你看到的现象。
你只需要绑定一个 change 事件处理函数,然后在这个函数里,获取当前人物的嘴巴来改变状态。而当前人物则是由 click 事件设置的,代码大概如下
var current;
for (var j = 0; j < divList.length; j++) {
(function(el) {
divList[el].onclick = function() {
current = divArray[el];
// gg = divArray[el];//gg为选中的元素的svgdocument
// init(gg);//将选中的元素传入函数进行修改
};
})(j);
}
function init(/*elem*/) {
var mouthSetting = document.getElementById("mouthSet");
//mouthsetting为range滚动条的ID
// var svgMouth = elem.getElementById("mouth");
//获取svg的某个子元素
mouthSetting.addEventListener("change", test, false);
//为range绑定事件
function test() {
if (!current) { return; }
var svgMouse = current.getElementById("mouth");
svgMouth.setAttribute("d", "M 40 115 Q 60 " + this.value * 150 + " 75 115");
}
}
init();
这篇关于javascript - 重复绑定事件问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文