jquery - 如何在不触发点击jquery的情况下突出显示文本？

Question

我希望用户能够点击一个元素并突出显示相同的元素。如果他们点击它应该表现得像点击，但如果他们按下鼠标并选择一些文本，它不应该表现得像点击（因为那不是点击）。如果你按下鼠标然后 100 万年后鼠标按下，jQuery 会触发一次点击。我意识到你可以这样做：

$myElm.on("mousedown.tmp", function () {
    $myElm.off("mouTsedown.tmp");
    $myElm.on("mouseup", function () {
        $myElm.off("mouseup.tmp")
    }
    }); // 

更正拼写和其他事件处理程序中的因素。我的意思是粗略地说。

我不想使用插件。

Answer 1

Here's my fiddle solution, I hope it's what your looking for.

I'm using mouseup() for the highlighting of the text. And in the click event I'm checking to see if text has been selected.

 var selection = window.getSelection();
      if(selection == 0)
       // Click event code goes here

Below is the code.

$(function(){
  $("div").click(function(){

      var selection = window.getSelection();
      if(selection == 0)
      {
          // click event code goes here.
      }
  });
  $("div").mouseup(function(){
    document.execCommand("BackColor", false, "yellow"); // highlight selected text
      document.designMode = "off";
  });    
  $("div").mousedown(function(){
     document.designMode = "on"; // Turn on design mode
  });
 });

Answer 2

var mydate = new Date()
var downtime;

$('#div').on('mousedown', function() {
    downtime = mydate.getTime();
});

$('#div').on('mouseup', function() {
    if((mydate.getTime() - downtime) < 500) {
        //perform click function 
    }
    else {
        //highlight text
    }
});

Answer 3

跟踪鼠标按下时的鼠标位置。将其与 mouseup 上的鼠标位置进行比较。如果鼠标移动了一定数量的像素，则阻止默认事件。

event.preventDefault();