jQuery 事件 - 忽略对点击的关注

Question

我制作了一个包含多个使用 contenteditable 属性的元素的页面。我添加了这样的功能，即当您跳转到下一个元素时，会自动选择文本(使用我在 this answer 上找到的一个小插件)。

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

现在我的问题是，我不想在点击而不是跳转到该元素时跳转到该元素。当元素已经在 View 中时会很烦人，但当您单击它时会跳转到页面顶部。这是 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() 并更改绑定(bind)顺序但无济于事。在单击而不是选项卡上忽略此焦点事件的最佳方法是什么？或者有没有办法恢复原来的自动滚动功能？

Answer 1

使用 jQuery 的 .stopPropagation()在您的点击事件上:

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

编辑:我已经更新了 jsFiddle使用 .mouseenter() 和 .mouseleave() 设置忽略标志。