已解決430363個問題，去搜搜看，總會有你想問的

重復綁定事件問題

首頁猿問重復綁定事件問題

重復綁定事件問題

JavaScript

一只甜甜圈 2018-09-14 09:09:48

我想在點擊一個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，兩個圖像的嘴巴角度都會變化！！請問這是為什么？綁定事件為什么會重復？新手求助~謝謝

查看完整描述

1 回答

holdtom

TA貢獻1805條經驗獲得超10個贊

你為同一個元素（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();

反對回復 2018-10-11

1 回答
0 關注
681 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

重復綁定事件問題

重復綁定事件問題

1 回答

添加回答