從子元素中刪除超鏈接行為

Question

我有一個錨標記，其中我通過jQuery附加了一些div。 我希望父<a>標記的“超鏈接”效果不應出現在附加的子元素中。

我們如何使用jQuery或其他方式實現這一目標。

這是我想要的小提琴 。

更新：大多數答案都告訴您如何刪除點擊效果。 是否存在可以阻止子元素的錨標記的每個默認行為的東西？

Answer 1

小提琴

好。 這是一些示例HTML

<a href="google.com" id="first">
    <div>
        <p>Blah</p>
    </div>
    <div>
        <p>Blah</p>
    </div>
    <div>
        <p>Blah</p>
    </div>
</a>

<a href="google.com" id="second">
    <div>
        <p>Blah 2</p>
    </div>
    <div>
        <p>Blah 2</p>
    </div>
    <div>
        <p>Blah 2</p>
    </div>
</a>

該CSS將刪除下划線，更改字體顏色和光標

div{
    display: inline;
}

#second{
    text-decoration: none;
    color: #000;
    cursor: default;
}

jQuery從子級中刪除click事件

$('#second').children().each(function(){
    $(this).click(function(e){
        e.preventDefault();
    });
});

更新 ：根據您的評論，您正在嘗試做的事情很復雜且有點奇怪。 您說出於某種原因，您必須將div包裝在achor標記中，但不要讓它們繼承屬性。 您將不得不做出一些權衡。 訣竅是從a標簽中刪除“ href” 。 您不必為此編寫任何jQuery / javascript。 事實上，您甚至不需要任何CSS。 本質上，從上面刪除所有的css和jquery，並從第二個a刪除href。

小提琴

Answer 2

您可以使用：first-child選擇器。 查看http://api.jquery.com/first-child-selector/

Answer 3

您可以使用CSS刪除下划線：

a div {
    text-decoration: none
}

要停止錨點跟隨其href屬性，您需要將處理程序綁定到返回false的click事件。 在jQuery中，您可以通過以下方式實現：

$('a div').on('click', function() {
    // do whatever you want to do here

    return false;
});

提供jsfiddle之后，我編輯了選擇器（添加了div ）。 不過，還有一件事。 根據您的小提琴，我認為您不希望div包裹“某些東西”。 它看起來應該像這樣： jsfiddle

Answer 4

您應該在錨點上添加一個事件偵聽器，並阻止默認行為：

document.getElementsByTagName("a")[0].addEventListener("click", function(e){
    if(e.target.tagName=="DIV") e.preventDefault();
});