Question

我正在尝试检测未从现有选项中选择颜色并且用户单击窗口上任何位置的情况。您可以在以下位置测试代码： https://jsfiddle.net/pr2501/5roh14ne/185/

最后，我在检测单击窗口时遇到了麻烦。如您在我的示例中可能看到的，我确实评论了不符合我期望的部分。我想检测用户是否在窗口中而不是在颜色矩形中单击。

HTML 修饰文字

<div id="openColor" class="modalDialog" style="display:none">
    <div>
    <input type="button" id="getTheTextID" value="Get the text at first"/></br></br>
                           <span id="textToColor" style="display:none">Then select the color for the text</span>
                             <div id="colorPalete1" style="display:none">
                                  <button id="B1" class="buttonA button1c" ></button>
                                  <button id="B2" class="buttonA button1" ></button>
                                  <button id="B3" class="buttonA button1a" ></button>
                                  <button id="B4" class="buttonA button1b" ></button>                                  
                               </div>
    </div>
</div>

和CSS

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;

}

.buttonA {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 16px;

  display: inline-block;

  margin: 8px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 

  border: 2px solid #ff0000;
}

.button1:hover {
  background-color: #ff0000;

}
.button1a {
  background-color: white; 

  border: 2px solid #ff8000;
}

.button1a:hover {
  background-color: #ff8000;

}
.button1b {
  background-color: white; 

  border: 2px solid #ffa000;
}

.button1b:hover {
  background-color: #ffa000;

}
.button1c {
  background-color: white; 

  border: 2px solid #a00000;
}

.button1c:hover {
  background-color: #a00000;

}

JS代码

function showColorDialog(){
 document.getElementById("openColor").style.display= "block";
}
document.getElementById("openColorHref").onclick=showColorDialog;

var text1;
function getTheTextF(){
 text1 =prompt("Enter text:", "");
   if ( text1  === "") {
    document.getElementById("openColor").style.display= "none";    
   } else if ( text1 ) {   
   document.getElementById("textToColor").style.display= "block"; 
   document.getElementById("colorPalete1").style.display= "block"; 
   document.getElementById("getTheTextID").style.display= "none";  
   } else {document.getElementById("openColor").style.display= "none";}    
}
document.getElementById("getTheTextID").onclick=getTheTextF;


function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}
function toHex(n) {
  n = parseInt(n,10);
  if (isNaN(n)) return "00";
  n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);
}
var hex ;

function getColor1(){

    var border1=window.getComputedStyle(document.activeElement, null).border;
    var indexOfLAT = border1.lastIndexOf('rgb');
    var res1 = border1.substring(indexOfLAT+3);
   var R= border1.substring(
    border1.lastIndexOf("(") + 1, 
    border1.indexOf(",")
    );
     var G= border1.substring(
    border1.indexOf(",") + 1, 
    border1.lastIndexOf(",")
    ); 
     var B= border1.substring(
    border1.lastIndexOf(",") + 1, 
    border1.lastIndexOf(")")
    );

 hex = "#"+rgbToHex(R,G,B);
 document.getElementById("textToColor").innerHTML=text1;
document.getElementById("textToColor").style.color=hex;

}

document.getElementById("B1").onclick=getColor1;
document.getElementById("B2").onclick=getColor1;
document.getElementById("B3").onclick=getColor1;
document.getElementById("B4").onclick=getColor1;



function exitFrom(){
   /*if (document.getElementById("openColor").style.display=="block"){
     var pattern = /(?:^|\s)buttonA(?:\s|$)/
     if (document.activeElement.className.match(pattern)){}else{
      alert("Color for text was not picked. You will have to do it from begining");
          document.getElementById("openColor").style.display= "none";
     }
   }*/
}
window.addEventListener("click", exitFrom);

Answer 1

在为 addEventListener 方法指定侦听器或函数回调时，提供 event 参数。然后，您可以对该事件采取行动，以检查其目标元素。像这样：

function exitFrom(event) {
    if (e.target.contains(document.getElementById("openColorHref")) || document.getElementById("openColor").contains(e.target)) {
        return
    }
    // rest of the code...
}

从自定义调色板中检测单击其他位置然后单击按钮

1 个答案: