Unobtrusive Javascript：删除链接，如果启用Javascript

我使用PopBox在我的网页上放大缩略图。但我希望我的网站能够为JavaScript关闭的用户工作。Unobtrusive Javascript：删除链接，如果启用Javascript

我试着用下面的HTML代码：

<a href="image.jpg"> 
    <img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);"/> 
</a>

现在我需要关闭A-标签使用JavaScript，否则我PopBox将无法正常工作。

我该怎么做？

来源

2008-09-15 arturh

只要把的onclick上A-标签：

< A HREF = “image.jpg的” 的onclick = “POP（...）;返回false;”> < IMG ...> </A>

确保你把“返回false“ - 这使得它不会跟随锚点链接，如果js执行。

来源

2008-09-15 14:55:05

这似乎是最好的解决办法（waaay比我找到了更好的）。但是，我的情况并不是很好，因为这个PopBox thingy试图重写onclick事件处理程序，所以当你再次点击它时它会再次关闭。将需要看看这个... – arturh 2008-09-15 15:06:16

把onclick事件到链接本身，并从处理程序返回false，如果你不想要的默认行为来执行（链接遵循）

来源

2008-09-15 14:53:37

你可以给你的所有备用锚标记特定的类名，像“简单”

使用prototype，你可以使用这个类使用一个CSS选择器，例如所有标签的数组

var anchors=$$('a.simple')

现在你可以遍历数组，并清除在href属性，或者安装一个onclick处理程序，以覆盖正常的行为，等等

（编辑补充上市上面的其他方法简单得多，这只是一个背景，做了很多不显眼的JavaScript，在那里你的JS踢，去和增加一个功能的HTML页面与额外的东西！）

来源

2008-09-15 14:56:12

继续谨慎 - 这是非常缓慢的IE6。 – 2010-06-08 08:53:59

href属性不需要为锚（<a>标签），所以摆脱它...

<a id="apic001" href="pic001.png"><img src="tn_pic001.png"></a> 

    <script type="text/javascript"> 
     document.getElementById("apic001").removeAttribute("href"); 
    </script>

此方法将避免图书馆争用onclick。

在IE6/FF3/Chrome中测试。附带好处：您可以直接链接到包含该缩略图的页面部分，使用该ID作为URI片段：http://whatever/gallery.html#apic001。

为了获得最大的浏览器兼容性，在您的标记（“名”和“身份证”的值必须是相同的）添加name="apic001"属性锚标记。

使用jQuery，道场，原型，等你应该能够做多，类似的锚的removeAttribute无需标识。

来源

2009-02-11 21:51:35

你应该能够混合和匹配来自克里斯的想法与自己的代码返回FALSE：

<a href="image.jpg" onclick="return false;"> 
    <img src="thumbnail.jpg" pbsrc="image.jpg" onclick="Pop(...);"> 
</a>

如果有人已停用Javascript，那么他们的浏览器会忽略这两个元素的onclick声明，并遵循链接;如果他们启用了Javascript，那么他们的浏览器会遵循两个OnClick语句 - 第一个告诉他们不要跟随<a>链接。^_^

来源

2009-05-02 11:59:54

我可以建议，在我看来，最好的解决方案？这是使用jQuery 1.4+。

这里有一个包含所有照片的容器。注意添加的类。

<div id="photo-container"> 
    <a href="image1.jpg"> 
     <img class="popup-image" src="thumbnail1.jpg" pbsrc="image1.jpg" /> 
    </a> 
    <a href="image2.jpg"> 
     <img class="popup-image" src="thumbnail2.jpg" pbsrc="image2.jpg" /> 
    </a> 
    <a href="image3.jpg"> 
     <img class="popup-image" src="thumbnail3.jpg" pbsrc="image3.jpg"/> 
    </a> 
</div>

的，那么你做一个单一的事件处理程序是这样的：

<script type="text/javascript"> 
$(document).ready(function(){ 
    var container = $('#photo-container'); 

    // let's bind our event handler 
    container.bind('click', function(event){ 
     // thus we find (if any) the image the user has clicked on 
     var target = $(event.target).closest('img.popup-image'); 

     // If the user has not hit any image, we do not handle the click 
     if (!target.length) return; 

     event.preventDefault(); // instead of return false; 

     // And here you can do what you want to your image 
     // which you can get from target 
     Pop(target.get(0)); 
    }); 
}); 
</script>

来源

2010-06-08 08:53:35

Unobtrusive Javascript：删除链接，如果启用Javascript

回答

相关问题