Question

我有一个带有输出内容的div，有时会输出链接。但是当此输出div将contentEditable属性设置为true时，如果使链接不可点击。

奇怪的是你仍然可以将鼠标悬停在它上面，在尝试点击它之前，它仍然看起来像一个链接。（蓝色，带下划线，悬停会改变蓝色等）

但是当你去点击它时它不会带你到链接。我可以右键单击并在新窗口中打开或打开它，它可以正常工作。

有没有办法让它再次点击，这样用户就不必一直点击它？

<div contentEditable='true'> 
    Some content with link: <a href='https://google.com' target='_blank'>Google</a>
</div>

这是一个JSFiddle示例：https://jsfiddle.net/ce13w610/

我仍然需要内容保持可编辑状态，但让链接再次直观地运行会很不错。

编辑：将其他解决方案作为答案，而不是编辑。：）

Answer 1

你必须使链接不可编辑：

<div class='content-output' contentEditable='true'>
    My content and link here: <a contentEditable='false' href='https://www.youtube.com/watch?v=dQw4w9WgXcQ' target='_blank'>Some video</a>
</div>

https://jsfiddle.net/ce13w610/1/

Answer 2

其他解决方案：

我去使用jQuery使输出div中的所有标签都具有属性contentEditable = false。

$("#content-output a[href]").attr('contentEditable', 'false');

Answer 3

在这里，另一个可能有点矫枉过正：

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" contentEditable="true">
  <a href="http://www.google.com" target="_blank">Click Me!</a>
</div>
<script>
  $('#content a').mouseenter(function() {
    console.log("Works");
    $('#content').attr("contentEditable", "false");
  });
  $('#content a').mouseleave(function() {
    $('#content').attr("contentEditable", "true");
  });
</script>

＆＃13;

https://jsfiddle.net/9dk4sgkk/

contentEditable attr设置为true使得内容中的链接无法点击

3 个答案: