模仿 tweetEventHandler

Question

I'm using react and want to mimic the EventHandler that is used on a twitter tweet (and many other things I'm sure).

如果一个元素的文本被突出显示并且在鼠标松开时触发，则什么也不做，但如果只是单击它而没有任何文本被突出显示，则触发该事件。

这不是 onClick, onMouseUp, onMouseDown, or onMouseDownCapture 的标准行为。我也试过添加 onSelect={e => e.preventDefault}.

我可以测量鼠标按下的时间量，如果超过 x 毫秒则什么都不做，但我感觉有更简单（或更正确）的解决方案。有人知道吗？

<div
 className='post'
 onClick={() => {
          if(text is highlighted){
            do nothing;
          }
          else{
               do something;
          } 
}>

Answer 1

可能会有帮助

A Selection object represents the range of text selected by the user or the current position of the caret. To obtain a Selection object for examination or manipulation, call window.getSelection().more

 <div
      className="post"
      onClick={() => {
        if (window.getSelection().toString() !== "sample")
          console.log("Do somthings");
        else console.log("Do nothing");
      }}
    >
      sample
  </div>

模仿 tweetEventHandler

Mimic tweet EventHandler

javascript

dom

event-handling

reactjs

如果一个元素的文本被突出显示并且在鼠标松开时触发，则什么也不做，但如果只是单击它而没有任何文本被突出显示，则触发该事件。