Question

我的表格底部有各种导航按钮。如果用户对表单进行了更改，然后单击除此之外的任何链接或按钮，则应向他们发出浏览器警报，警告他们未保存的更改。

导航按钮都具有数据属性data-save-form，脚本当前如下：

var formChanged = false;

$('form').on('change', 'input, textarea, select', function () {
    formChanged = true;
});

$(window).on('beforeunload', function (e) {
    if (!$(e.target.activeElement).is('[data-save-form]') && formChanged) {
        return "Changes you made may not be saved. You can save your progress by clicking the 'Save and Exit' button at the bottom of the page.";
    }
});

但是，IE的事件对象似乎没有target.activeElement属性。我怎样才能找到这个元素，或者有更好的方法来解决这个问题？

这是一个使用jQuery 1.11.0的旧网站，但我确信将其用于此目的并不是必需的。

Answer 1

我设法通过捕获mousedown事件目标并在e.target.activeElement未定义时使用该目标来实现目标。

var targetElement;

$(window).on('mousedown', function (e) {
    targetElement = e.target;
});

$(window).on('beforeunload', function (e) {
    var target = e.target.activeElement || targetElement;
    if (!$(target).is('[data-save-form]') && formChanged) {
        return "Changes you made may not be saved. You can save your progress by clicking the 'Save and Exit' button at the bottom of the page.";
    }
});

我之前在另一个SO帖子上看到了这样的解决方案，但无法使其正常工作。如果我发现它，我会链接它。

在IE中选择事件目标元素

1 个答案: