Javascript - Div Box作爲HyperLink +嵌套文本HyperLink - 可能嗎？

看起來好像嵌套錨標籤是不可能的，可以使用JavaScript來有一個Div Box超鏈接到Page-A，同時有一個單詞的文本在Div Box超鏈接到Page-B？Javascript - Div Box作爲HyperLink +嵌套文本HyperLink - 可能嗎？

試圖與下面的JavaScript工作（適用於超鏈接的框或文本，但不能同時）：

<script type="text/javascript"> 

    // Content-Link Click Events 

    $('.content-link-page-a').click(function(){ 
    window.location.href = "page-a.html"; 
    }); 

    $('.content-link-page-b').click(function(){ 
    window.location.href = "page-b.html"; 
    }); 

</script>

下面是一些CSS：

<style> 
    .box { 
    height: 50px; 
    width: 100px; 
    border: 1px solid #000; 
    } 
</style>

而這裏的HTML：

<div class="box content-link-page-a"> 
     <div id="username" class="content-link-page-b">UserName</div> 
</div><!--/box-->

來源

2013-06-27 sourcingsynergy

嵌套鏈接很混亂。不要使用它們。 – Blender

當然，雖然盒子需要超鏈接到某處，並且盒子中的一段文字需要鏈接到其他地方，所以需要一個解決方案 – sourcingsynergy

嘗試從內部DIV周圍移除，並且確保將內部在你的CSS中創建一個更大的z-index。可能它會以這種方式工作，因爲內部DIV會首先捕獲點擊事件。另外，可能你應該調用e.preventDefault（）;在你的點擊處理程序結束。 –

你應該從內部DIV周圍去除A，給它一個比外面更大的Z-index呃，並調用 event.stopPropagation來處理內部點擊事件，以防止事件冒泡到外部div。 Here is a fiddle來解決任務。

樣品的內部處理程序：

$('.content-link-page-b').click(function(e){ 
    alert("page-b.html"); 
    e.stopPropagation(); 
});

編輯：在我的評論上面，我提到e.preventDefault（）調用。我不是那個意思，因爲這意味着本地DOM元素的處理程序將被阻止，而不是jQuery事件冒泡。

來源

2013-06-27 22:00:13

完美。謝謝 – sourcingsynergy

Javascript - Div Box作爲HyperLink +嵌套文本HyperLink - 可能嗎？

回答

相關問題