0

我正在尝试修复我的灯箱 Javascript 中的一个小错误，同时保持编辑尽可能不引人注目。

示例页面： http: //www.mattressonline.co.uk/Product/Silentnight-Miracoil-3-Gold-Label-Limited-Edition-Mattress-P43

问题在于主要产品图片。如果单击两个缩略图中的任何一个，图像将按预期加载到灯箱内。单击大图像会触发单击图库图像的事件，您可以看到灯箱开始弹出，但随后 <a> 标记的默认事件会触发，并且图像会在单独的窗口中加载。这不应该发生，因为链接使用 return false;

<a id="gallery-link" class="main" href="#" onclick="click($('gallery-image-0')); return false;" title="Gold Label Mattress">
    <img id="gallery-image" src="/content/products/280x175/silentnight-ariel-miracoil-gold-label-limited-edition.jpg" alt="Gold Label Mattress">
</a>

除此之外，它几乎只是一个标准的原型/scriptaculous/lightbox2 设置。

知道为什么 return false 不返回 false 吗？这令人难以置信的沮丧。

编辑：IE6 和 8 确实按照告知返回 false。当前的 Firefox、Chrome 和 IE9 不支持。

4

2 回答 2

1

不显眼的脚本通常意味着不使用内联属性。当前的最佳实践是在元素添加到 DOM 之后附加侦听器：

$('gallery-link').observe('click', function(event) {
    click($('gallery-image-0'));
    event.stop();
});
于 2011-11-09T15:06:13.160 回答
1

在另一个具有自己的一组操作的事件被触发后，您正试图返回 false。所以，你打算打电话return false，但在你打电话之前，gallery-image-0回应你的click()电话，这可能已经导致浏览器打开另一个页面。

那有意义吗？因此，您需要观察click目标元素并确保它以return falseor结尾event.stop()。

于 2011-11-18T21:15:41.040 回答