jquery:保持<a> link clickable in clickable div</a>

时间:2011-04-05 09:30:04

标签: jquery events html clickable propagation

如果用户点击该div中的链接,我想要阻止点击div。 但是没有使用.click(function(){});在链接上。

以下是代码:

$('div.feature').click(function() { window.location = $(this).attr('rel');});

这是div的一个示例内容:

<div id="feature" rel="urlnumberone">
some text
<a href="javascript:topicchange(this);" class="insideLink">Link</a>
</div>

由于某些特定原因我无法使用这样的东西

$('.insideLink').click(function(event){
    event.stopImmediatePropagation();
});

我必须使用这个“topicchange()”函数,有什么方法可以防止事件传播吗?

谢谢!

4 个答案:

答案 0 :(得分:24)

您提供的示例应该有效,但您的div的ID为“feature”,但在js中您定位的是一个类。 jsfiddle.net/SNP3K

<div id="feature" rel="urlnumberone">
    some text
    <a href="#" class="insideLink">Link</a>
</div>

$('div#feature').click(function() { 
    alert('div');
});

$('.insideLink').click(function(event){
    event.stopImmediatePropagation();
    alert('link')
});

答案 1 :(得分:1)

根据http://api.jquery.com/bind/,event.stopPropagation应该允许执行目标上的其他事件处理程序。您仍然可以从Href执行,但您也可以忽略它来处理默认的点击冒泡到div。

完整演示:http://jsfiddle.net/leomwa/qrFQM/

段:

function topicChange()
{
    alert('Message from Link: After the div mouse event, I can execute');
    return false;
}

$('div#feature').click(function(evnt)
{
    var $originatingTarget = $(evnt.target);
    if ($originatingTarget && $originatingTarget.is('.insideLink'))
    {
        alert('Message from Div: Ahh! You clicked on Link...');
        evnt.stopPropagation(); // Allows other handlers on the event.target to be executed.
    }
});

与@shanethehat非常相似。

要求@shanethehat要求澄清。

答案 2 :(得分:1)

<div id="feature" onclick="location.href='index.php';">
   <a href="anotherpage.php">link</a>
</div>

这很容易!

答案 3 :(得分:0)

$(document).ready(function() {
    $('div#feature').click(function() {
        alert('div');
    });
    $('div#feature a').click(function(evt) {
        evt.stopPropagation();
    });
});

function topicchange(targ) {
    alert('link');
    return false;
}

这是允许的吗?主题更改函数直接从href调用,但阻止click事件传播。或者一切都发生在topicchange?