4

我制作了一个包含多个使用该contenteditable属性的元素的页面。我添加了当您切换到下一个元素时自动选择文本的功能（使用我在这个答案中找到的一个小插件）。

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

现在我的问题是，如果单击该元素而不是通过选项卡跳转到该元素，我不想跳转到该元素。当元素已经在视图中时它会变得很烦人，但是当您单击它时会跳转到页面顶部。这是一个小提琴来看看。

这是我正在使用的代码：

$.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()更改绑定顺序，但无济于事。在单击而不是选项卡上忽略此焦点事件的最佳方法是什么？或者有没有办法恢复原来的自动滚动功能？

4

2 回答 2

3

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

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

编辑：我已经使用and更新了jsFiddle来设置一个忽略标志。.mouseenter().mouseleave()

于 2013-06-17T21:31:38.860 回答
1

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

但请注意，并非所有浏览器似乎都具有相同的事件顺序，因此在 FF 上可能会先聚焦，然后单击，但 IE 的行为可能会有所不同。更多信息在这里：JavaScript 中的事件优先级是什么？

这里还有更多关于事件顺序和交互可能性的信息：您可以选择将事件侦听器设置为冒泡阶段或捕获阶段。更多信息在这里：http ://www.quirksmode.org/js/events_order.html#link4

于 2013-06-17T21:31:51.423 回答