Question

我这样写一个页面：

<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”，所以当我单击时，将弹出两个事件。我以为我会通过使用event [0]，enent [1]来讲述两个事件。但是事实证明，事件是一个对象。（“事件”是事件监听器绑定功能的参数funtion（event））。我不能将其视为数组。

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.stopPropagation（）。我认为那不好。

您可以在上一个功能中看到，如果我不停止“ span”和“ label [for]”，我将同时收到两个事件。而且event.target将提供两个输出，即两个对象，而不是在一个数组中。那么我可以使用类似数组的方式来分离两个事件吗？

Answer 1

如果您只想在跨度上处理事件，则可以执行以下操作：

INSERT INTO @DateList
VALUES(@Counter + 1, DATEADD(day,@Counter, @StartDate), DATEPART(year, @StartDate), DATEPART(QUARTER, @StartDate),DATEPART(month, @StartDate), DatePart(WEEKDAY,@StartDate)) ;
SET @StartDate = DATEADD(day,@Counter + 1, @StartDate);
SET @Counter +=1;

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

1 个答案: