javascript - onmousedown 不会滴下来

Question

在我的 html 中有

<div id="map"></div>

#map {
    width: 100%;
    height: 100%;
    background-color: #CCC;
}

它会动态填充多个 div，如下所示

<div class="basicTiles1" style="left: 8128px; top: 8128px;"></div>

.basictiles1 {
    position: absolute;
    width: 64px;
    height: 64px;
    background-image: url(<snip urlToPng>);
    background-position: 0px 0px;
}

然后像这样向#map 添加一个 onmousedown 事件

$('#map').on('mousedown', function(){console.log("mousedown");});

事件永远不会被触发。如果我不将图 block 添加到 map ，它会起作用。

我尝试使用 jquery 的“on”、“onmousedown”和 javascripts“addEventListener”。该脚本没有任何编译错误。该事件似乎并没有逐渐减少。

是不是因为方 block 是绝对位置的？是因为它们是动态添加的吗？

Answer 1

我知道当您绑定(bind)事件时，DIV 还不存在。尝试使用 delegate 代替，如下所示:

$("#map").delegate("div", "mousedown", function() {
    console.log("mousedown");
});

编辑:详细说明jQuery .on() 引用声明:“将一个或多个事件的事件处理函数附加到所选元素。”

此外，当您将事件直接绑定(bind)到您的 #map 时，只要您不使用其他东西覆盖它(您必须在实际的 #map 元素上按下鼠标)，它就会起作用。

jQuery .delegate() 引用指出:“基于一组特定的根，现在或将来，将处理程序附加到与选择器匹配的所有元素的一个或多个事件元素。”

由于您将在绑定(bind)事件后添加内部 div，因此这完全符合您的要求。指定“div”选择器实际上将 mousedown 绑定(bind)到#map 内的任何(当前或 future 的)div。如果那里有其他不可点击的 div，您实际上可以使用 div.basictiles1。