当拼写检查打开时，上下文菜单事件在ie上不起作用

Context menu event not working on ie when spellcheck is on

本文关键字：事件 菜单 ie 不起作用 上下文 检查      更新时间：2023-09-26

当将contextmenu事件附加到充满拼写错误的内容可编辑div时，IE(11)忽略回调并显示自己的拼写检查菜单。

jsbin: http://jsbin.com/favit/3/(您应该预览它，然后编辑div，您将看到问题)

关闭拼写检查不是一个选项，因为我不能告诉客户这样做。

我在谷歌上遇到这个问题，我想我应该发布一个答案，以防有人在谷歌上搜索这个问题。这就是如何在IE 上添加你自己的上下文菜单，而不需要禁用拼写检查。它甚至可以在你右键单击拼写错误的单词并在其下方加红色下划线时使用。

基本上有两个步骤:

1)在mousedown事件中，您需要禁用对contenteditable元素的拼写检查。

2)之后，重新启用对contenteditable元素的拼写检查。

下面是一个工作示例:

var editable = $('#editable');
var mouseX, mouseY;
$(document).mousemove(function(event) {
        mouseX = event.pageX;
        mouseY = event.pageY;
    });
editable.mousedown(function(e) {
       if (e.button == 2) {
          editable.attr('spellcheck','false');
          e.preventDefault ? e.preventDefault : e.returnValue = false;
          e.stopPropagation();
          return false;
        }
        return true;
      });
editable.get(0).oncontextmenu = function(e) {
        e.preventDefault ? e.preventDefault : e.returnValue = false;
        return false;
    };
editable.on("contextmenu", function(e) {
  e.preventDefault ? e.preventDefault : e.returnValue = false;
  e.stopPropagation();
  
  if ($('#contextmenu').length == 0) {
            $('<div>').attr('id', 'contextmenu').appendTo('body');
            $('#contextmenu').css('z-index', 1000);
            $('#contextmenu').css('position', 'absolute');
            $('<ul>').appendTo('#contextmenu');
    
            $('<li>').html('some').appendTo('#contextmenu ul');
            $('<li>').html('text').appendTo('#contextmenu ul');
            $('<li>').html('here').appendTo('#contextmenu ul');
          }
  $('#contextmenu').css('top', mouseY);
  $('#contextmenu').css('left', mouseX);
  
  $('#contextmenu li').click(function() {
       $('#contextmenu').remove();
       editable.attr('spellcheck','true');
   });
  
});
#contextmenu {
  border: 1px solid #000;
  background-color: #fff;
  padding: 5px;
}
#contextmenu ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
#contextmenu li {
  cursor: pointer;
  padding: 2px;
}
#contextmenu li:hover {
  background-color: #2daade;
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="editable" contenteditable="true">Click me and type some badly spelled words.</div>

明白了:添加属性"spellcheck"，将其值设置为"false"，可以解决这个问题。

<div contenteditable="true" spellcheck="false">
    example notaword
</div>
相关文章：