stopImmediatePropagation无法按预期工作

时间:2013-09-11 16:11:44

标签: javascript jquery mouseevent

请考虑以下代码:

HTML

<a href="http://www.google.com" target="_blank" id="myLink" class="anyclass">testlink</a>

JAVASCRIPT

$('#myLink').on("mousedown",doMouseDown);

function doMouseDown(e)
{
    e.stopImmediatePropagation();
    console.log("Mouse down");
    return true;
}

这是我的代码的一个非常简化的版本,但问题完全相同。有两个字:在我的处理程序中使用e.stopImmediatePropagation(),我希望当我点击链接时我不会被发送给Google。我应该只执行console.log()。 我所有的研究都表明我是这样认为的,但它仍在执行“mousedown”处理程序和链接的默认“点击”处理程序(即它在新标签中打开Goog​​le)。

我已经尝试过,在没有信心的情况下,添加e.preventDefault()作为我的处理程序的第一条指令,我尝试返回false,我尝试在绑定时将我的处理程序定义为匿名函数,我试过简单地从一个匿名函数调用它,所有这些都以不同的组合,没有任何改进。 我必须承认,我完全没有想法来解决这个问题。你们中的任何人都会如此友善地指出我正确的方向吗?任何帮助都将得到广泛赞赏。

如果您想测试here's the fiddle

2 个答案:

答案 0 :(得分:2)

试试这个

var i=0;
$('#myLink').on('mousedown mouseup click', function(e) {

    e.preventDefault();
    e.stopImmediatePropagation();
    console.log(e.type);
    console.log(i);
    i++;
});

在控制台中打印

"mousedown"
0
"mouseup"
1 
"click"
2

并使用

var i=0;
$('#myLink').on('mousedown mouseup click', function(e) {
if(i>0)
    {
    return false;
    }
e.preventDefault();
e.stopPropagation();
console.log(e.type);
console.log(i);
i++;
 });

在控制台中打印

"mousedown"
0

答案 1 :(得分:0)

谢谢你的想法! 我一直在努力实施hoverclick(移动Chrome会在菜单上触发hoverclick。 我修改了一下以满足我的需求,但它没有100%修复 - 进入PC和BlackBerry浏览器时,你必须点击两次才能关闭子菜单。

http://jsfiddle.net/j24gpw4z/2/

var i = 0;
function preventClick(e) {
    console.log("function");
    if (i > 0) {
        console.log(i + ": " + e.type);
        i = 0;
        console.log("false: " + i);
        return false;
    }
    $("#subnav").slideToggle("fast", "linear");
    console.log(i + ": " + e.type);
    i++;
};

$(".submenu").hover(function(e) {
    e.preventDefault();
    preventClick(e);
    i++
},
                    function(e) {
    e.preventDefault();
    console.log("hover out");
    $("#subnav").hide();
    i = 0;
}
                   );

$(".submenu").click(function(e) {
    e.preventDefault();
    preventClick(e);
    i = 0;
});