Question

所以我有以下代码：

JS

function overlay() {
    el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
    return true;
}
$("#close-link").click(function(event) {
    event.preventDefault();
    var targetUrl = $("#confirm").attr("href");
});
$("#confirm").click(function(event) {
    event.preventDefault();
});
$("#go").click(function(event) {
    event.preventDefault();
});

HTML

<div id="overlay">
    <div id="dialog">
        <h3 class="top-bar">Leaving so soon?</h3>
        <span class="close-button-container">[<a href="#" onclick="overlay();" title="Close" id="close-link">X</a>]</span><br /><br /><br />
        Example text
        <br />No, take me <a href="#" hreflang="en-US" onclick="window.location.href = targetUrl;" id="go">there</a> anyway...
    </div>
</div>
<!-- ... -->
<a href="https://www.google.com/" title="Example Link" onclick="overlay()" id="confirm">Example Link</a>

问题

我尝试添加指向其他网站的链接。但是，我想在点击此链接后添加一个确认框。 #close-link用于关闭对话框，如上所示的#confirm链接应该打开它。 #go链接位于对话框内，如果点击，则会将用户带到#confirm链接的位置。但是出了点问题......现在当我点击#confirm时，它会打开对话框一秒钟并直接将我发送到href。不应该event.preventDefault解决这个问题吗？如果是这样，那为什么不呢？

Answer 1

向overlay(event)添加活动。此功能需要阻止点击，因此它应该具有e.preventDefault()

<a href="https://www.google.com/" title="Example Link" onclick="overlay(event);" id="confirm">Example Link</a>

function overlay(event) {
        event.preventDefault();
        el = document.getElementById("overlay");
        el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
        var href = event.target.href
        //If click button close
            //Hidden div, no go
        //If click button go
            //window.location = href
    }

<强>解释

您的<a>有两个绑定的事件。一个使用#confirm，另一个使用内联onclick=。你应该只选择一个：）

Answer 2

如果您的代码作为事件侦听器回调的一部分被调用，event.preventDefault()将起作用。但是您的代码正在运行，因为onclick只运行函数overlay() - 使用jQuery将侦听器附加到各种元素（#close-link，#go，#confirm）。在连接了侦听器之后，他们开始侦听自<a href="...">更改页面以来从未发生过的事件。

<强>解决方案：

最好停止对所有代码使用on*属性。拿出来。然后只使用事件监听器来满足您的所有需求。

$('#confirm').on('click', function(event) {
    event.preventDefault(); // this will work

    // Do your toggle visibility and whatever else you need here.
});

还有其他可能的解决方案继续使用onclick调用函数，但我不推荐它。

Answer 3

所以，有些事情;

删除所有内联事件处理程序
使用jQuery时，请充分利用它，避免编写vanilla javascript，除非有理由这样做。
请勿将A用于除实际链接之外的任何其他目的（在您的案例中为关闭按钮）。使用按钮/其他标签。

查看以下代码，看看它是否符合您的要求。

＆＃13;

$("#confirm, #close-link").click(overlay);

function overlay(evt) {
    evt.preventDefault();
    var el = $("#overlay");
    el.css({"visibility": el.css("visibility") === "visible" && "hidden" || "visible"});
    if ( this.tagName === 'A' ) {
        el.find("a").attr("href", this.href);
    }
}

＆＃13;

#overlay {
    height: 150px;
    width: 200px;
    background: green;
    visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay">
    <div id="dialog">
        <h3 class="top-bar">Leaving so soon?</h3>
        <span class="close-button-container" id="close-link">[X]</span><br /><br /><br />
        Example text
        <br />No, take me <a href="#" hreflang="en-US" id="go">there</a> anyway...
    </div>
</div>
<!-- ... -->
<a href="https://www.google.com/" title="Example Link" id="confirm">Example Link</a>

＆＃13;

Answer 4

尝试将点击事件附加到#confirm内的$(document).ready元素：

$(document).ready(function() {
      $("#confirm").on("click", function(event) {
             event.preventDefault();
              });
         });

preventDefault不能与外部链接一起使用？

4 个答案: