确定单击了哪个元素

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`
}

当 imageClicked 被调用以响应点击事件时，调用时 this 设置为被点击的图像元素。

How to prevent the div to handle the click event when the image was clicked

而不是 onclick，您使用现代事件处理并停止传播。当您使用 uiWebView 时，您不必担心旧的 IE，这使事情变得更简单：

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
}

实例：

// 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>

旁注：虽然您可以在 HTML 中使用 onClick，但当您在 JavaScript 中使用它时，它具有为 onclick（全部小写）。我已经在仍然使用它的版本中进行了上面的更改。

确定单击了哪个元素

Determing which element was clicked

javascript

uiwebview

ios