11

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

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

不幸的是：

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

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

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

4

6 回答 6

13

我能看到的唯一解决方案是将返回添加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>
于 2012-05-11T09:20:08.253 回答
2

我知道这已经很老了……但我最近在工作中遇到了这个问题。不幸的是，我们仍然被迫支持 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
};

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

于 2015-03-26T17:22:15.643 回答
2

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

$chosen.find('.chzn-single').click(function() {
    return false;
});
于 2012-05-11T09:40:12.197 回答
1

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

就我而言，我已经把

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

设置选择的库后，它工作正常

于 2013-12-17T16:23:15.083 回答
0

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

我更喜欢使用模拟 href 的 CSS 类，显然您将更改此类的颜色和样式以适合您的网站，但出于此目的，它是标准的蓝色下划线链接

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

然后使用一个简单的锚

<a onclick = "do_save();" class ="linkSimulate">Link</a>
于 2014-03-31T13:41:11.627 回答
0

即使这个问题很老，我也已经提高了@Bartosz 的答案，在@Oiva Eskola 的评论中解决了这个问题：

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

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

            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;');
            }

        });
于 2015-04-28T10:23:14.860 回答