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

Question

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

jsbin: http://jsbin.com/favit/3/ (你应该预览一下，然后编辑div，你就会看到问题)

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

Answer 1

我在 Google 上遇到了这个问题，我想我会发布一个答案，以防其他人用 Google 搜索到这个问题。这是如何在 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>