Javascript 在contenteditable div中使用箭头键移动插入符号时停止不需要的滚动

当我选择

文档

、

*

、

正文

或任何特定元素时，向下键都能完美工作

但是当我添加

.not（'.some class'）

时，keydown的工作原理是这样的

.not（）

甚至不存在。可能是因为按键向下影响子元素的方式，但我不确定：

$('*').not('.some-class').on('keydown',function(e){ 
    var key = e.charCode || e.keyCode;
    if(key == 33 || key == 34 || key == 35 || key == 36 || key == 37 || key == 38 || key == 39 || key == 40 ) {
        e.preventDefault();
    } else {}
});

如何对除1个子类之外的整个文档禁用这些键

编辑：

如何在保持使用箭头移动插入符号的能力的同时停止这种不必要的滚动

edit2:感谢Jason p和Kaido完成了解决方案

事件会产生泡沫（好吧，很多事件都会产生泡沫）。这意味着它们在事件的目标上激发，然后在DOM树上的每个元素上激发，因此即使您没有将处理程序绑定到

。某个类

，它也会为该元素的祖先激发。另外，将事件处理程序绑定到

*

通常不是一个好主意。也许这样的东西对你有用

---

您可以从使用光标的位置检测器，然后从

preventDefault（）

使用光标的位置检测器，只有在结束时才可以使用

$(document).on('keydown',function(e){
    console.log(this, e.target);
    var key = e.charCode || e.keyCode;
    if(key == 16 || key == 32 || key == 33 || key == 34 || key == 35 || key == 36 || key == 37 || key == 38 || key == 39 || key == 40 ) {
        e.preventDefault();
    } else {}
});
$('.b').on('keydown', function(e) {
  e.stopPropagation(); 
  var key = e.charCode || e.keyCode;
   //Above part comes from https://stackoverflow.com/questions/7451468/contenteditable-div-how-can-i-determine-if-the-cursor-is-at-the-start-or-end-o/7478420#7478420
    range = window.getSelection().getRangeAt(0)
    post_range = document.createRange();
    post_range.selectNodeContents(this);
    post_range.setStart(range.endContainer, range.endOffset);
    next_text = post_range.cloneContents();

    if( next_text.textContent.length === 0 && key == 39 ){
        e.preventDefault();
    }
});

---

试试

$（'*:not（.some class））

这在小提琴中很有效。但是，按键仍然会影响页面（滚动）。如何防止这种情况发生？你能创建一个小提琴来演示这个问题吗？这里是-工作，但我想消除的滚动问题仍然存在。也许我应该重新表述这个问题。编辑：按住向右箭头。Chrome不会滚动页面，但是在Firefox中，使用B（使用StopRopagation），当到达文本末尾时，它会滚动页面。太棒了！如果有人想知道如何禁用键，例如翻页，不管位置如何，只要这样做：

if（next_text.textContent.length==0,1&&key==34）

$(document).on('keydown',function(e){
    console.log(this, e.target);
    var key = e.charCode || e.keyCode;
    if(key == 16 || key == 32 || key == 33 || key == 34 || key == 35 || key == 36 || key == 37 || key == 38 || key == 39 || key == 40 ) {
        e.preventDefault();
    } else {}
});
$('.b').on('keydown', function(e) {
  e.stopPropagation(); 
  var key = e.charCode || e.keyCode;
   //Above part comes from https://stackoverflow.com/questions/7451468/contenteditable-div-how-can-i-determine-if-the-cursor-is-at-the-start-or-end-o/7478420#7478420
    range = window.getSelection().getRangeAt(0)
    post_range = document.createRange();
    post_range.selectNodeContents(this);
    post_range.setStart(range.endContainer, range.endOffset);
    next_text = post_range.cloneContents();

    if( next_text.textContent.length === 0 && key == 39 ){
        e.preventDefault();
    }
});