Question

我正在尝试为click函数添加一个处理程序以重定向到某个链接。我有一个父div，它有一个点击处理程序重定向到google.com，在父div中，我有一个带有指向yahoo.com的锚标记的子块。如果我点击包含yahoo.com链接的子div，它目前会转到google.com。我该如何克服这个问题？

我创建了一个JSFIDDLE。这是HTML代码：

<div class="maindiv">
    <div class="subdiv">
        <a href="http://yahoo.com">Click Me</a>
    </div>
</div>

和Javascript代码：

jQuery('.maindiv').click(function() {
    window.open('http://google.com');    
});

我希望单击父div应该将用户带到google.com，但父div中的任何链接都应该将用户带到相应的链接。

谢谢！

Answer 1

以下是更新后的代码：http://jsfiddle.net/c2XJf/23/

具体来说，您需要停止在锚标记上传播click事件，如下所示：

$('.subdiv a').click(function(event){
    event.stopPropagation();
});

如果您想在新标签/窗口中打开锚标记的链接，请将HTML目标属性添加到您的HTML中：

<a href="http://yahoo.com" target="_new">Click Me</a>

Answer 2

Jquery代码：

$('.subdiv a').click(function(event){
    event.stopPropagation();
    window.open('http://yahoo.com');
});
$('.subdiv').click(function(event){
    window.open('http://yahoo.com');
});
$('.maindiv').click(function(event){
    window.open('http://google.com');
});

并且您可以为subdiv设置宽度样式以完美显示重定向。

更新的代码是： http://jsfiddle.net/c2XJf/22/

Answer 3

检查目标div是否是当前div ..

试试这个

jQuery('.maindiv').click(function(e) {
 if(e.target == this){
     window.open('http://google.com');
 }
});

Answer 4

$('a').click(function(){window.open('http://yahoo.com');});

Answer 5

只需检查点击元素的 tagName 并重定向到相应的页面即可解决此问题。

jQuery('.maindiv').click(function(event) {
    var target = $(event.target);
    //checks if a tag has been clicked or not
    if(!target.is('a')){
        window.open('http://google.com');
    }
    else{
        window.open("http://yahoo.com");
    }
});

Demo

Answer 6

Html代码：

<div class="maindiv">
    <div class="subdiv">
        <a href="#">Click Me</a>
    </div>
</div>

Jquery代码：

jQuery('.maindiv').click(function() {
    window.open('http://google.com');    
});
jQuery('.maindiv').find('a').click(function() {
    window.open('http://yahoo.com');    
});

单击jQuery中的Function Conflict

6 个答案: