1

在我的 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;
}

然后像这样将 onmousedown 事件添加到#map

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

该事件永远不会被触发。如果我不将图块添加到地图中，它会起作用。

我试着用jquery的'on'，'onmousedown'，javascripts'addEventListener'来做。该脚本没有任何编译错误。该事件似乎并没有逐渐减少。

是因为瓷砖是绝对位置吗？是因为它们是动态添加的吗？

4

1 回答 1

3

我知道当你绑定事件时，DIV 还没有。尝试delegate改用，如下所示：

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

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

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

jQuery.delegate()参考声明改为：“基于一组特定的根元素，为现在或将来匹配选择器的所有元素附加一个或多个事件的处理程序。”

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

于 2013-01-27T16:12:36.993 回答