从子元素中删除超链接行为

时间:2013-08-28 14:36:16

标签: javascript jquery html

我有一个锚标记,我在其中通过jQuery追加一些div。我希望父<a>标记的'超链接'效果不应出现在附加的子元素中。

我们如何使用jQuery或其他方式实现这一目标。

以下是我想要的 fiddle

更新 大多数答案都说明了如何删除点击效果。是不是可以阻止子元素的锚标记的每个默认行为?

4 个答案:

答案 0 :(得分:3)

  

FIDDLE

确定。这是一些示例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并从第二个删除href。

<强> FIDDLE

答案 1 :(得分:0)

您可以使用:first-child Selector。看http://api.jquery.com/first-child-selector/

答案 2 :(得分:0)

您可以使用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”包裹“Something”。 它应该如下所示:jsfiddle

答案 3 :(得分:0)

您应该向锚点添加一个eventlistener,并为prevent添加默认行为:

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