Question

您好我有两个Jquery功能。一个函数设置为哈希滚动，另一个功能设置为点击模式。这些功能挂钩到Links。我已经设置了href="#"的空链接。然而，我的两个钩子互相干扰。如果我在第一个函数中检查空hashlinks并返回false，那么我在库中显示图像模式的第二个函数将被停用。有没有办法解决。我确信显而易见的答案是在我的函数中添加一些变量。但我想创建一个函数来检查href="#"是否为真且不滚动但不会干扰Jquery可能挂钩到该链接的任何其他函数。另外为什么这两个钩子相互干扰？

    <div><a href="/#somelinkonpage">Some text</a><div>
    <div id="gallery>
    <div class="item">
    <a class="thumbnail thumbnail-sm" href="#" rel="tooltip">
        <img src="...jpg" class="img-rounded">
    </a>
    </div>
    <div>

    //smooth scroll hashes function.
    ('a[href*=#]').on('click', function () {
                    var href = $.attr(this, 'href');
                    href = href.replace(/^\//, '');
                    if (href == '#') {
                        return false;// but if I return false here modal does not work.
                    }
                    else { //smooth scroll code here }
                    return false;// if I return false here my modal function works.
                });
    //Display gallery item in modal function.
    $('#gallery').on('click', '.item a', function () {
                    $('#myModal').modal('show');
                    return false;
                });

编辑：我对这种行为感到困惑

if (href == '#') {
 return false;// but if I return false here modal does not work.
 }
 else { //smooth scroll code here }
 return false;// if I return false here my modal function works.

Answer 1

当您从事件处理程序返回false时，它会阻止<a>元素的默认操作，但它也会停止事件的传播 - 这意味着其他附加事件处理程序将不会执行。如果您希望平滑滚动跳转链接的事件处理程序允许这些链接上的其他事件处理程序执行，您应该只是阻止默认操作，但仍允许事件传播。您可以致电event.preventDefault()，而不是返回false。

启动这样的事件处理程序：

$('a[href*=#]').on('click', function (event) {
    event.preventDefault();
    ...

和

$('#gallery').on('click', '.item a', function (event) {
    event.preventDefault();
    ...

不要从中回复false。

Answer 2

可能会发生这种情况，因为第二种情况使用事件委托，因此第一个事件被取消时，它不会为委托冒泡。试试这个：

 $('#gallery .item a').on('click', function () {
     alert("hhh");
     $('#myModal').modal('show');
     return false;
 });

希望这会有所帮助。干杯

Answer 3

你尝试过这样的事吗？

('a[href*=#]').on('click', function () {
    var href = $.attr(this, 'href');
    href = href.replace(/^\//, '');
    if (href != '#') {
        //smooth scroll code here
    }
    return false;
});

Jquery On（“点击”）挂钩链接互相干扰

3 个答案: