Question

我基本上设置了一个带有onClick操作的div，如下所示：

myDiv.setAttribute("onclick", myAction);

之后，我在div中放置了一个像这样的图像：

myDiv.innerHTML = '<img src="' + myImage + '" height="' + myDiv.height + '" width="' + myDiv.width + '">';

.width和。 height是我为myDiv创建的属性。

所以我的问题是，当我将图像放在div中时，myDiv的onClick没有响应，无论如何都要解决这个问题。我知道div属性backgroundImage，但是那个不支持在所有浏览器中自定义大小。我试图给图像提供与div相同的onClick动作，但只是弄得很乱，有没有办法让javascript忽略图像并在div中注册一个点击，即使点击是在div里面的图像？ / p>

问题的直观解释：

http://bildr.no/view/860258

谢谢。

Answer 1

为什么不做这样的事情，而不是覆盖div的innerHTML？

var img = document.createElement('img');
img.setAttribute('src', myImage);
img.setAttribute('width', myDiv.width);
img.setAttribute('height', myDiv.height);
myDiv.appendChild(img);

Answer 2

我想到的第一件事是不要事件冒泡吗？我开始搜索并调高this。我认为这可能是一个有趣的阅读。

Answer 3

是的，您正在寻找的是事件传播。像jQuery这样的JS库可能对这样的事情非常有帮助。 jQuery使用.live()函数来完成事件传播。

对于给定的HTML：

<div class="imageWrap">
    <img src="someimage.jpg">
</div>

你会使用类似的东西：

$(".imageWrap").live("click", function (event) {
    // Do something awesome here
    $(event.target).addClass("clicked");
});

图像上的点击应该“传播”或冒泡到div，在那里可以捕获和处理它。一旦掌握了它的工作原理，事件冒泡就非常有用。

Answer 4

我找到了你的问题。

这是小提琴：http://jsfiddle.net/maniator/gN4e9/

问题出在这一行：myDiv.setAttribute("onclick", myAction);

这就是将整个 myAction函数放入你不想要的onclick中。

将其更改为：myDiv.setAttribute("onclick", 'myAction()');，它应该可以正常工作。

Javascript：在div中的图像顶部接收onClick，可以完成吗？

4 个答案: