HTML事件同时弹出,如何选择1?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (53)

我把一页写成这样:

<div id=“listener”>
   <ul id="top">
    <li id="li-QD">
      <input id="inV-QD" type="checkbox">
      <label>
        <input id="inC-QD" data-coor="3" data-level="0" data-order="0" data-parent="top" type="checkbox">
        <span></span>
      </label>
      <label for="inV-QD">QD</label>
          <ul id="ul-QD">
             <li id="li-southPart">
                <input id="inV-southPart" type="checkbox">
                <label>
                <input id="inC-southPart" data-coor="0" data-level="1" data-order="0" data-parent="QD" type="checkbox">
                <span></span>
                </label>
                <label for="inV-southPart">southPart</label>            
             </li>
          </ul>
      </li>
   </ul>
</div>

这是一个添加动态的列表。我将事件侦听器添加到顶部的“div”中,因此每当我单击一个输入时,我都会通过使用“even.Target”来查找单击的对象,获得目标名称。

现在,因为我使用了“span”,所以当我单击时,会弹出两个事件。但事实证明,这个事件是一个物体。(“事件”是事件侦听器绑定函数的参数函数(事件)。我不能把它当成数组。

function bodyIni(){
let httpRequest;
httpRequest = new XMLHttpRequest();
const url = "http://localhost/mapMonitor/areaIni.php";
httpRequest.onreadystatechange = alertContents;

httpRequest.open("GET",url,true);
httpRequest.send();

function alertContents(){
    if(httpRequest.readyState === XMLHttpRequest.DONE){
        if(httpRequest.status ===200){
            //alert(httpRequest.responseText);Add innetHTML
            document.getElementById("dym-List").innerHTML=httpRequest.responseText;
            //stopPropagation <span> $$ <label[for]>
            const spans = document.querySelectorAll("#listener span")
            for(let index=0;index<spans.length; index++){
                spans[index].addEventListener("click",function(e){e.stopPropagation();},false);
            }

            const labelFors = document.querySelectorAll("#listener label[for]")
            for( index=0;index<labelFors.length; index++){
                labelFors[index].addEventListener("click",function(e){e.stopPropagation();},false);
            }
        }
        else{
            alert("this is the wrong part.");
        }
    }
}//End of Dym-adding part

// add listener to "#dym-List"list
const list = document.getElementById("listener");
list.addEventListener("click",getElementUsingId,false);
}

我使用这个函数,拿起输入复选框。

    function getElementUsingId(event){
        let tarname = event.target;
        let nameId = tarname.id;
        let index = nameId.indexOf("-")+1;
        //get the district Name
        let name = nameId.substring(index);
        //store select name.
        selectName = name;
        //get the name ,with prefix, we can call associate functions;
        const liNameID = "#li-"+name;
        uncheckAllBox();
        checkAllChildBox(liNameID);
        const inCName = "inC-"+name;
        showArea(inCName);
        //showMap(name);
    }

我的方法是使用document.querySelect()查找所有跨度,并对每个跨使用Event.topPropagation()。我觉得这样不好。

你可以在最后一个函数中看到,如果我不停止“span”和“标签”为,我将同时参加两个活动。事件目标将提供两个输出,即两个对象,而不是一个数组。那么,我可以使用类似数组的方式来分离两个事件吗?

提问于
用户回答回答于

如果只想在跨范围内处理事件,可以执行以下操作:

if (event.target.tagName == "SPAN") {
    event.stopPropagation();
    // rest of event processing
}

扫码关注云+社区

领取腾讯云代金券