锚定“javascript:void(0）”导致window.onbeforeunload在IE上触发

Anchor "javascript:void(0)" causing window.onbeforeunload to fire on IE

本文关键字：onbeforeunload window IE 导致 javascript void 锚定      更新时间：2023-09-26

我正在使用一个名为 Chosen 的下拉小部件，它有一个带有 href javascript:void(0)的锚点。当我单击下拉菜单时，它可以工作，但在 IE 上它会触发一个新的 onbeforeunload 事件，这令人沮丧，因为应用程序会确认您是否要离开。显然，您不希望在输入表单数据时遇到这些问题。

有没有办法在不改变所选库的情况下摆脱这个问题？

不幸的是：

window.onbeforeunload = function (e) {
    console.log(window.location);
};

也不登录javascript:void(0)，所以，我不能用它来检查目标URL。

这种行为至少发生在IE9中，这就是我所关心的（不是较旧的IE）。

我能看到的唯一解决方案是将false的返回添加到链接的onclick事件处理程序中。它会告诉IE你不打算通过单击链接来更改页面。

<a href="javascript:void(0);" onclick="doSomething(); return false;">Link</a>

同样可以这样写：

<script>
    function doSomething() {
        // do Something
        return false;
    }
</script>
<a href="javascript:void(0);" onclick="return doSomething();">Link</a>

我最终听取了针对锚点的单击事件并取消了该事件以防止触发onBeforeUnload：

$chosen.find('.chzn-single').click(function() {
    return false;
});
我知道

这已经很老了...但是我最近在工作中遇到了这个问题。不幸的是，我们仍然被迫支持IE9。我们正在这个项目上使用 Angular.js 当用户单击带有data-ng-click的锚标签时，它将动态地将新内容加载到页面上。

在您的示例中，您所要做的就是传递事件并在函数中阻止默认操作并阻止它冒泡。为此，您所要做的就是：

// Inside the HTML
{...}
<a href="javascript:void(0);" onclick="doSomething(evt);">Link</a>
{...}
<script>
    function doSomething(evt) {
        evt.preventDefault();
        evt.stopPropagation();
        // Do Something
    };
</script>
{...}

在Angular中，我所做的只是以下内容：

// Inside the View
<a href="javascript:void(0)" data-ng-click="addStuff($event)">Add Stuff</a>
// Inside the controller
function addStuff($event) {
    $event.preventDefault();
    $event.stopPropagation();
    // Do Something
};

我希望这还不算太晚，我希望它能帮助其他人。

有同样的问题。刚刚找到你的问题。我的解决方案是，您需要将onclick属性添加到每个选定的下拉列表锚标记并调用window.onbeforeunload = null

就我而言，我已经把

$(".chzn-single").attr("onclick", "window.onbeforeunload = null;");

设置所选库后，它工作正常

不要

为此使用 href。 一个简单的解决方案，只需最少的额外工作：

我更喜欢使用模拟 href 的 CSS 类，显然你会改变这个类的颜色和样式以适应你的网站，但为此目的，它是标准的蓝色下划线链接

<style>
    .linkSimulate
    {
        cursor: pointer;
        COLOR: blue;
        text-decoration: underline;
    }
</style>

然后使用简单的锚点 

<a onclick = "do_save();" class ="linkSimulate">Link</a>

即使这个问题很旧，我也增强了@Bartosz的答案，在 @Oiva Eskola 的评论中修复了这个问题：

这不会阻止 window.onbeforeunload 在单击选定的链接元素后工作吗？ – var thisOnClick;

以下是我正确创建 HTML onclick 属性的解决方案，不会覆盖或取消事件：

            var thisOnClick;
            $.each( $(' .container a '), function(){
                thisOnClick = $(this).attr('onclick');
                if ( typeof thisOnClick == 'undefined' ) {
                    $(this).attr('onclick', 'window.onbeforeunload = null;');
                } else if ( typeof thisOnClick == 'string' && thisOnClick.indexOf('window.onbeforeunload') == -1  ) {
                $(this).attr('onclick', thisOnClick + 'window.onbeforeunload = null;');
            }
        });
相关文章：