2011-05-06 68 views
0

我想获取一个按钮,其中有一个图像来触发一个事件。浏览器是FF4。是否可以将点击事件绑定到按钮内的图像?

<button> 
    <img src="/exp.jpg" /> 
</button> 

jQuery的

$('img').bind('click', function() { 
    window.alert('I was clicked'); 
}); 

然而,这绝不会触发点击事件?任何人都可以向正确的方向指出我为什么以及需要阅读什么来理解这种行为?

非常感谢,

更新: 感谢大家的答案和评论。这种行为让我感到奇怪,但现在有道理。干杯!

+1

为什么你想让图像具有点击事件处理程序而不是按钮本身? – Maz 2011-05-06 16:14:16

+1

或...为什么你需要'

+0

这是一个简单的测试使用jQuery UI,我想我会添加一个小十字,以便按钮可以'关闭'。这是我通过按钮元素中的单击事件发现了这个有趣的问题。 – 2011-05-06 16:29:00

回答

0

当您开始将工作,但会针对特定浏览器,镇回答说,它的工作,但是这取决于你的浏览器,之后该浏览器的版本。基本的按钮功能被硬编码到浏览器中,所以改变最多只会有bug。我建议使用img和css来设置img边框和背景的样式,使其看起来像一个按钮。

事实上,你可能会得到它在一两个甚至三个浏览器的工作,但开发人员的目标是尽可能通用(除IE6以外),所以我会用你的技能在设计来实现你想要的,它会为你节省很多头痛。

+0

绝对同意。我在玩按钮时偶然发现了这种行为。谢谢你的建议。 – 2011-05-06 16:30:47

1

您的代码在Chrome中运行,here's a demo

但是,我试过的所有其他浏览器似乎都是按照你说的去做的。

如果你真的在这个效果之后,你可能不得不使用CSS来定位图片上方的按钮。

Something like this demo应该给你更多的跨浏览器一致性。

+0

在这里不工作,Opera 11.10 – Andre 2011-05-06 16:17:22

+0

不能在IE9中工作。尽管Chrome对我来说很好...... – Town 2011-05-06 16:19:24

+0

Firefox 4在这里。刚刚在Chrome中测试过,正如你所说的那样工作正常。我认为这是冒泡或捕获的东西,但不能解决问题,所以要求帮助:) – 2011-05-06 16:29:40

0

我不知道为什么你想这样做。点击图片也会导致按钮被点击。为什么不捎带回事件呢?

http://jsfiddle.net/Jaybles/hHBdX/2/

+0

在Chrome中触发两次,这似乎是迄今为止唯一的浏览器! – Town 2011-05-06 16:26:10

+0

没错。我的观点是,在所有的浏览器中,听按钮点击都可以工作,但同样的倾向于倾听点击的图像。这就是为什么按钮点击完成相同的事情,并且是更可靠的方法。 – Dutchie432 2011-05-06 16:45:52