时间戳

首页 > 解决方案 > 事件委托问题

javascript - 事件委托问题

问题描述

我正在使用 mapbox 地理编码器插件，它是一个搜索栏，可在您键入时填充地点建议并在下拉列表中显示它们。本质上，我正在使用动态列表元素。我正在尝试使用事件委托，因此当我单击列表项时，会触发我创建的函数。

我的功能没有任何问题，因为我在其他地方使用它。我决定尝试console.log("Li has been clicked!!")验证列表项是否在识别我的'click'. 它不是，控制台中没有抛出任何错误。所以我不确定到底出了什么问题。

下面是动态生成的 html 片段和我对事件委托的尝试。任何帮助确定问题所在将不胜感激。谢谢你。

HTML：

<div class="suggestions-wrapper">
    <ul class="suggestions" style="display: none;">
        <li class=" active">
            <a>
                <div class="mapboxgl-ctrl-geocoder--suggestion">
                    <div class="mapboxgl-ctrl-geocoder--suggestion-title">844 Napa Valley Drive</div>
                    <div class="mapboxgl-ctrl-geocoder--suggestion-address"> Fort Collins, Colorado 80525, United States of America</div>
                </div>
            </a>
        </li>
        <li>
            <a>
                <div class="mapboxgl-ctrl-geocoder--suggestion">
                    <div class="mapboxgl-ctrl-geocoder--suggestion-title">844 Courtenay Circle</div>
                    <div class="mapboxgl-ctrl-geocoder--suggestion-address"> Fort Collins, Colorado 80525, United States of America</div>
                </div>
            </a>
        </li>
    </ul>
</div>

JS：

document.getElementsByClassName('suggestions')[0].addEventListener('click', function(e) {
    if(e.target && e.target.nodeName == "LI") {
        plotIso();
        console.log("Li has been clicked!!")
    }
})

解决方案：

我在我的应用程序中更改'click'为'mouseup'，也'LI'按照'DIV'@Menelaos Bakopoulos 的建议更改为。不知道为什么它接受'mouseup'而不是'click'。我假设它与 mapbox 地理编码插件的编码方式有关。

var searchSugg = document.getElementsByClassName('suggestions')[0];
searchSugg.addEventListener('mouseup', function(e) {
    if(e.target && e.target.nodeName == "DIV") {
        plotIso();
        console.log("Li has been clicked!!")
    }
});

标签： javascripthtmlevent-delegation

解决方案

将条件放在“LI”上意味着您必须单击实际的点。如果您不单击项目符号或圆点，则不会发生任何事情。

你需要改变这个条件。

我注释掉了您的 IF 语句，这确实显示了我添加的 console.log 和警报。

document.getElementsByClassName('suggestions')[0].addEventListener('click', function(e) {
    //if(e.target && e.target.nodeName == "LI") {
       alert("Li has been clicked!!")
        console.log("Li has been clicked!!")
   // }
})

小提琴：https ://jsfiddle.net/menelaosbgr/ftbpyLr9/3/

更新

正如OP所述，将 LI 更改为 DIV 可以解决问题：

 document.getElementsByClassName('suggestions')[0].addEventListener('click', function(e) {
        //if(e.target && e.target.nodeName == "DIV") {
           alert("Li has been clicked!!")
            console.log("Li has been clicked!!")
       // }
    })

推荐阅读