Question

我有一个类似的HTML：

<div class="clicked-div" onclick="divClicked(this);">
    <img src="src1"/>
    <img src="src2"/>
    ......
</div>

如果我使用以下方法设置img onclick事件：

       var imgs = document.getElementsByTagName("img");
        for (var i = 0; i < imgs.length; i++) {
          imgs[i].onClick=imageClicked(imgs[i]);
        }
      function divClicked(div){
            alert(div.getAttribute("id"));
        }

        function imageClicked(image){
            alert(image.getAttribute("src"));
        }

当uiwebview加载一个图像时，它会调用imageClicked一段时间，虽然我没有点击它。当我点击图像时，如何确定哪个方法称为divClicked或imageClicked？谢谢你。

Answer 1

在您尝试将其设置为处理程序时，您的代码正在调用 imageClicked。

它实际上比你想象的要容易：

var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = imageClicked;  // <=== Not *calling*, just referring to it
}
function imageClicked() {
    alert(this.getAttribute("src")); // <== `this` rather than `image`
}

当响应click事件调用imageClicked时，调用this并将onclick设置为单击的图像元素。

如何防止div在单击图像时处理click事件

而不是var imgs = document.getElementsByTagName("img"); for (var i = 0; i < imgs.length; i++) { imgs[i].addEventListener("click", imageClicked, false); } function imageClicked(e) { alert(this.getAttribute("src")); e.stopPropagation(); // <=== Prevents the click reaching the div }，您使用现代事件处理和停止传播。当您使用uiWebView时，您不必担心旧的IE，这会使事情变得更简单：

// Hook up the divs so we handle clicks on them
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
    divs[i].onclick = divClicked;  // <=== Not *calling*, just referring to it
}
function divClicked() {
    alert("div clicked");
}

// The images code
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener("click", imageClicked, false);
}
function imageClicked(e) {
    alert(this.getAttribute("src"));
    e.stopPropagation();
}

直播示例：

<div>
  <img src="https://www.gravatar.com/avatar/2cd48a51689add31036ce202cc020255?s=32&d=identicon&r=PG&f=1">
</div>
<div>
  <img src="https://www.gravatar.com/avatar/760b4da77fd54d37c104029ff1f56749?s=32&d=identicon&r=PG">
</div>
<div>
  <img src="https://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG">
</div>
<div>
  No image in this one, so you can see it handle clicks
</div>

onClick

附注：虽然您可以在HTML中使用onclick，但在JavaScript中使用时，为{{1}}（全部为小写）。我在仍在使用它的版本中进行了上述更改。

确定点击了哪个元素

1 个答案: