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

回答

相關問題