Question

我创建了一个包含多个使用contenteditable属性的元素的页面。我添加了一些功能，当您选中下一个元素时，文本会自动选中（使用我在this answer上找到的一个小插件）。

但是如果您选中了屏幕外的元素，则窗口不会自动滚动显示该元素（至少在Chrome中）。所以我使用了focus事件和.animate()来跳转到元素。

现在我的问题是我不想要跳转到元素，如果点击它而不是选项卡。当元素已经在视图中时会变得很烦人，但是当你点击它时会跳到页面的顶部。这是a fiddle to look at。

这是我正在使用的代码：

$.fn.selectText = function(){
    var doc = document;
    var element = this[0];
    if (doc.body.createTextRange) {
        var range = document.body.createTextRange();
        range.moveToElementText(element);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = document.createRange();
        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

$(document).on('focus', '.content', function(e) {
    var top = $(this).offset().top - 100;
    $(this).selectText();
    $('body').animate({
         scrollTop: top
     }, 25);
    return true;
});

我已尝试使用stopPropagation()和preventDefault()并更改绑定顺序，但无济于事。在点击时忽略此焦点事件的最佳方法是什么？或者有没有办法恢复原始的自动滚动功能？

Answer 1

在点击事件中使用jQuery的.stopPropagation()：

$('.content').click(function(e){
    e.stopPropagation();
});

编辑：我使用.mouseenter()和.mouseleave()更新了jsFiddle以设置忽略标记。

Answer 2

我无法重现它在Firefox上“跳跃”的行为，但我可以为您提供一个提示：在 focus事件之前触发 click事件。您可以通过在click-eventhandler中添加console.log('click');并在焦点事件处理程序中添加console.log('focus');来找到这一点。

但请注意，并非所有浏览器似乎都具有相同的事件顺序，因此在FF上它可能首先关注，然后单击，但IE可能表现不同，例如。更多相关信息：What is the event precedence in JavaScript?

此处更多关于事件顺序和交互的可能性：您可以选择将事件监听器设置为气泡阶段或捕获阶段。更多相关信息：http://www.quirksmode.org/js/events_order.html#link4

jQuery事件 - 忽略对click的关注

2 个答案: