Question

我有onClick事件的元素（它是一个图标）。我只想在满足某些条件的情况下显示该元素，并且我能够读取该条件并完全处理CSS中的显示/隐藏。

如果元素可见，我点击它，我希望它做两个动作：

触发JS事件，
隐藏元素。

但CSS隐藏元素的方式比JS可以更快地响应，并且事件根本不会被触发。

我没有研究JS中的事件系统是如何工作的，但在我看来，首先解析了CSS，然后JS事件系统在某个x/y位置接收有关点击事件的信息，其中元素不再存在，因此事件不会被触发。

我尝试了几个CSS选项来隐藏包含这个CSS属性的元素：

display: block / none;
visibility: visible / hidden;
z-index: 1 / -1;
width|height: auto / 0;
top|left|right|bottom: 0 / -9999px;

如果我使用opacity: 1 / 0隐藏元素，则事件被触发，因为该元素在其所在的位置保持可点击状态，但这也是问题，因为我不想要如果不可见则要点击的元素。

有没有hack，如何通过纯CSS隐藏元素，同时触发事件呢？

我尝试使用transition: all 160ms;延迟CSS，但隐藏元素的CSS规则是即时的（您无法转换display，visibility或z-index）所以这没用。

我在Google Chrome 53.0.2785.116平台Win10 x64

编辑：`JSBin`

Answer 1

点击问题是隐藏项目时，无法完成点击操作。因此，您可以切换到mousedown而不是单击

＆＃13;

document.getElementById("test_click").addEventListener("mousedown", function(){
    console.log("Clicked");
});

＆＃13;

#test_container {
      position: relative; 
      display: inline-block;
    }
    
    #test_click {
      position: absolute;
      display: none;
      left: 100%;
      top: 50%;
    }
    
    #test_input:focus + #test_click {
      display: inline;
    }
    
    #test_input:focus + #test_click:hover {
      color: dodgerblue;
      cursor: pointer;
    }

＆＃13;

<div id="test_container">
    <input type="text" id="test_input" placeholder="focus me...">
    <span id="test_click">CLICK</span>
  </div>
  
  <h3>Click on the input and "CLICK" appears, click on "CLICK" and "CLICK" hides and no JS event is triggered although it is attached. Then, remove "display: none;" from CSS and try click again, the JS event is triggered.</h3>

＆＃13;

或添加css以保持元素在悬停时可见

＆＃13;

document.getElementById("test_click").addEventListener("click", function(){
    console.log("Clicked");
});

＆＃13;

#test_container {
      position: relative; 
      display: inline-block;
    }
    
    #test_click {
      position: absolute;
      display: none;
      left: 100%;
      top: 50%;
    }
    

    #test_click:hover,
    #test_input:focus + #test_click {
      display: inline;
    }
    
    #test_input:focus + #test_click:hover {
      color: dodgerblue;
      cursor: pointer;
    }

＆＃13;

<div id="test_container">
    <input type="text" id="test_input" placeholder="focus me...">
    <span id="test_click">CLICK</span>
  </div>
  
  <h3>Click on the input and "CLICK" appears, click on "CLICK" and "CLICK" hides and no JS event is triggered although it is attached. Then, remove "display: none;" from CSS and try click again, the JS event is triggered.</h3>

＆＃13;

如果元素被css隐藏，则MouseEvent吞噬

编辑：`JSBin`

1 个答案:

如果元素被css隐藏，则MouseEvent吞噬

编辑：JSBin

1 个答案:

编辑：`JSBin`