首頁猿問重復(fù)綁定事件問題

重復(fù)綁定事件問題

JavaScript

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

我想在點(diǎn)擊一個(gè)div后顯示邊框并且能夠改變它的svg子元素中的元素for(var j=0;j<divList.length;j++){ (function(el){ divList[el].onclick=function(){ gg=divArray[el];//gg為選中的元素的svgdocument init(gg);//將選中的元素傳入函數(shù)進(jìn)行修改 }; })(j); } function init(elem){ var mouthSetting=document.getElementById("mouthSet"); //mouthsetting為range滾動(dòng)條的ID var svgMouth=elem.getElementById("mouth"); //獲取svg的某個(gè)子元素 mouthSetting.addEventListener("change",test,false); //為range綁定事件 function test(){ svgMouth.setAttribute("d","M 40 115 Q 60 "+this.value*150+" 75 115");}但問題是當(dāng)我打開文件第一次點(diǎn)擊某個(gè)圖像時(shí)。是可以通過range調(diào)整嘴巴的角度，但當(dāng)我選擇另外一個(gè)圖像時(shí)，調(diào)整range，兩個(gè)圖像的嘴巴角度都會(huì)變化?。≌?qǐng)問這是為什么？綁定事件為什么會(huì)重復(fù)？新手求助~謝謝

查看完整描述

1 回答

holdtom

TA貢獻(xiàn)1805條經(jīng)驗(yàn) 獲得超10個(gè)贊

你為同一個(gè)元素（mouseSetting）綁定了 n 個(gè) "change" 事件，其實(shí)質(zhì)是為這個(gè)元素的 change 事件添加了 n 個(gè)處理函數(shù)，當(dāng)這個(gè)元素發(fā)生改變時(shí)，會(huì)遍歷所有 change 處理函數(shù)，依次調(diào)用。所以就出現(xiàn)了你看到的現(xiàn)象。

你只需要綁定一個(gè) change 事件處理函數(shù)，然后在這個(gè)函數(shù)里，獲取當(dāng)前人物的嘴巴來改變狀態(tài)。而當(dāng)前人物則是由 click 事件設(shè)置的，代碼大概如下

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);//將選中的元素傳入函數(shù)進(jìn)行修改
        };
    })(j);
}function init(/*elem*/) {    var mouthSetting = document.getElementById("mouthSet");    //mouthsetting為range滾動(dòng)條的ID
    // var svgMouth = elem.getElementById("mouth");
    //獲取svg的某個(gè)子元素
    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();

反對(duì) 回復(fù) 2018-10-11