爲什麼此按鈕的「單擊」按鈕的某些區域不起作用？

當鼠標指針位於下面屏幕截圖中顯示的位置時，爲什麼我的按鈕的單擊事件未註冊？我爲你創建了一個jsFiddle來測試它。請務必檢查您的瀏覽器控制檯是否有反饋。爲什麼此按鈕的「單擊」按鈕的某些區域不起作用？

這裏是我的代碼，我使用jQuery

var clickCounter = 0; 

$('button').click(function(){ 
    clickCounter++; 

    console.log('times clicked: ' + clickCounter); 
});

enter image description here

來源

2014-02-10 quelquecosa

它在的jsfiddle工作的數量在每一次點擊增加了最新的瀏覽器。 –

@SumanBogati嘗試移動你的鼠標，我可以在Chrome上重現他的問題。有一些奇怪的地方沒有註冊爲點擊。 – Danny

是的，我點擊底部和頂部的按鈕時，我轉載它。 –

我想Dave explained the problem well您正在將元素移動到其活動狀態，將元素移動到活動狀態會導致mousedown轉到一個元素，並且mouseup轉到另一個元素，因此點擊不會觸發，因爲如果mouseup和mousedown在同一個元素上，操作系統只會觸發點擊。

I think the best solution is to simplify your code a lot，並讓按鈕處於活動狀態，您的樣式會影響按鈕的活動外觀。以下CSS/HTML仍具有活動外觀，並且不會將按鈕從鼠標下移開，從UX角度來看這是一個壞主意。

<button id="signUpLogIn-logInBtn" class="logInBtn"> 
    <img src= "http://s10.postimg.org/z9yrvulut/log_In_Icon.png"/> 
    Add One<p class="logInBtnSub">See Console</p> 
</button> 


.logInBtn { 
    font-size: 1.4em; 
    text-transform: uppercase; 
    font-weight: 700; 
    background-color: #c6c6c6; 
    box-shadow: 0 8px #878787; 
    border-radius: 10px; 
    color: #402a3e; 
    cursor: pointer; 
    text-align: center; 
} 

.logInBtn img { 
    width: 50px; 
    height: 50px; 
    display: block; 
    margin: auto; 
} 
.logInBtnSub{ 
    font-size: 0.6em; 
    color: #878787;  
}

這裏有幾個解決方法

Don't use a button, use a div（此作品隨處可見，但不使用按鈕，所以您不必激活狀態）
Don't use click, use mouseup（這沒有按」工作在按鈕的最上方，但在其他地方工作）
Don't move the button around on its active state，如果您確實希望活動狀態看起來不同，請改用邊界/邊距填充。
Use pointer-events: none for elements within the button這個工作在我測試IE9，FF和Chrome（學分vals）

來源

2014-02-10 18:46:35

既然你是詳盡的，最後一種方式：set pointer-events：none;在.logInBtnSub類上:-) – vals

@Juan Mendes +1提供不同的場景。我嘗試了第三種場景的小提琴，按鈕在點擊時不會移動。你能解釋爲什麼嗎？ – quelquecosa

@quelquecosa我沒有解釋爲什麼。這就是導致錯誤的原因，移動元素並導致鼠標移動到不同的元素。所以我刪除了這個功能，但是你仍然可以解決它...這不是mouseup解決方案的好處嗎？ Val還提供了一個在最新瀏覽器中工作的解決方案（我添加了答案） –

這個問題是一個點擊是鼠標按下+鼠標鬆開。當你點擊該區域時，你位於mousedown的子元素部分，但是在mouseup中，你位於父元素的一部分，因此沒有元素可以完全點擊。不知道最好的解決方法是什麼，但這是問題所在。

.logInBtn:active{ 
    /*top:2.2em;*/ 
}

有了那個註釋了它的作品。

來源

2014-02-10 18:15:22 dave

您可以通過在「See Console」（它不會捕獲點擊）中的C之上執行mousedown，然後稍微移動鼠標（以便mouseup位於同一個元素上）來驗證。解決方法可能只是使用mouseup來代替。 –

該按鈕是否會因爲冒泡而接收到mouseup和mousedown事件並且仍然註冊點擊？我添加了一個body click處理程序，當它沒有觸發按鈕時也不會觸發，這很奇怪。 –

只有當鼠標左鍵按下並釋放在同一個對象上時，'onClick'纔會觸發。 Bubbling永遠不會創造一個新的事件 - 它只是將一個已經存在的事件發送到元素鏈中。 – dave

爲什麼此按鈕的「單擊」按鈕的某些區域不起作用？

回答

相關問題