javascript - 为什么我不能点击这个元素？

Question

如果您选择此文本，将出现一个带有颜色的 div。我正在尝试跟踪是否单击了其中一种颜色或 div (.boxes)。但我不能。这是基本的 JS，它不起作用。 为什么？

$(document).ready(function() {
  $(".boxes").click(function() {
    alert("Hello");
    });
  });

$("#actual_verse").mouseup(function() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    } else if (document.selection && document.selection.type != "Control") {
        text = document.selection.createRange().text;
    }
    
    if (/\S/.test(text)) {
      new_text = "<div id='color_div'>"+text+"</div>";
      
        
   // Tool Tip
  
var ele = document.getElementById('tooltip');
var sel = window.getSelection();
var rel1= document.createRange();
rel1.selectNode(document.getElementById('cal1'));
var rel2= document.createRange();
rel2.selectNode(document.getElementById('cal2'));
window.addEventListener('mouseup', function () {
    if (!sel.isCollapsed) {
        debugger;
        var r = sel.getRangeAt(0).getBoundingClientRect();
        var rb1 = rel1.getBoundingClientRect();
        var rb2 = rel2.getBoundingClientRect();
        ele.style.top = (r.bottom - rb2.top)*100/(rb1.top-rb2.top) + 'px'; //this will place ele below the selection
        ele.style.left = (r.left - rb2.left)*100/(rb1.left-rb2.left) + 'px'; //this will align the right edges together

        //code to set content

        ele.style.display = 'block';
    }
});
window.addEventListener('mousedown', function () {
    ele.style.display = 'none';
});

  // End of Tool Tip
  
  }
  
    
  });

/* Tool Kit */

#tooltip {
    position:absolute;
    display:none;
    border:grey solid 1px;
    background: #373737;
    padding: 5px;
    border-radius: 3px;
}
#cal1{
    position:absolute;
    height:0px;
    width:0px;
    top:100px;
    left:100px;
    overflow:none;
    z-index:-100;
}
#cal2{
    position:absolute;
    height:0px;
    width:0px;
    top:0;
    left:0;
    overflow:none;
    z-index:-100;
}

.boxes {
  width: 15px;
  height: 15px;
  cursor: pointer;
  display: inline-block;
  margin-right: 2px;
  position: relative;
  top: 3px;
}

#blue_box {
  background: #AAF6FF;
}

#green_box {
  background: #D6FFAA;
}

#orange_box {
  background: #FFBF98;
}

#purple_box {
  background: #D7D5FC;
}

#red_box {
  background: #FF9B9F;
}

#yellow_box {
  background: #FFF8AA;
}


/* End of Tool Kit */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='actual_verse'> Hello g mjfrmjrern erjnejnef jfejnfeijmfijfeifeef ejngjrrgrg  Hello g mjfrmjrern erjnejnef jfejnfeijmfijfeifeef ejngjrrgrg  Hello g mjfrmjrern erjnejnef jfejnfeijmfijfeifeef ejngjrrgrg  Hello g mjfrmjrern erjnejnef jfejnfeijmfijfeifeef ejngjrrgrg  Hello g mjfrmjrern erjnejnef jfejnfeijmfijfeifeef ejngjrrgrg  Hello g mjfrmjrern erjnejnef jfejnfeijmfijfeifeef ejngjrrgrg  </div>
<div id='cal1'>&nbsp;</div>
<div id='cal2'>&nbsp;</div>
<div id='tooltip'> <div id='blue_box' class='boxes' title='Blue' onclick='box()'></div> <div id='green_box' class='boxes' title='Green'></div> <div id='orange_box' class='boxes' title='Orange'></div> <div id='purple_box' class='boxes' title='Purple'></div> <div id='red_box' class='boxes' title='Red'></div> </div> <br> <br>

Answer 1

问题是这段代码:

window.addEventListener('mousedown', function() {
  ele.style.display = 'none';
});

工具提示被隐藏在 mousedown 上，它在单击“boxes”类之前触发。所以点击永远不会完成。将此代码移至点击功能 - demo

$(".boxes").click(function() {
  alert("Hello");
  document.getElementById('tooltip').style.display = 'none';
});