Element przycisku nie wyzwala zdarzenia kliknięcia po kliknięciu na tekst przycisku i zwolnieniu go (ale nadal znajduje się wewnątrz przycisku)?

Question

Na przeglądarek WebKit (testowałem Chrome i Safari na Macu), elementem przycisk zachowuje się dziwnie:

Wen w tym skrzypce http://jsfiddle.net/5ReUn/3/ ty wykonaj następujące czynności:

1. Wciśnij lewy przycisk myszy, gdy kursor znajduje się nad przycisk Kopiuj tekst
2. Przesuń kursor (gdy wciśnięty) na powierzchni przycisku bez tekstu
3. Zwolnij przycisk myszy

Następnie zdarzenie kliknięcia elementu przycisku nie jest uruchamiane!

HTML jest bardzo prosty:

<button id="button">Click</button> 

I CSS nie jest wyszukany w ogóle:

button { 
    display: block; 
    padding: 20px; 
} 

JS do kliknięcia połowu:

button = document.getElementById('button'); 
button.addEventListener('click', function() { 
    console.log('click'); 
}); 

Wielu odwiedzających na mojej stronie skarżą przyciski nie są klikalne. Nie zdają sobie sprawy, że przesuwają kursor podczas klikania.

Czy ktoś znalazł obejście tego problemu?

Answer 1

Okazuje się, że jest to a bug in WebKit.

szybkie rozwiązanie zakaz JavaScript jest zawinąć tekst w elemencie SPAN i sprawiają, że klikalności:

<button> 
    <span>Click Me</span> 
</button> 

Przykład CSS:

span { 
    display: block; 
    padding: 20px; 
    pointer-events: none; // < --- Solution! 
} 

Ponieważ błąd pojawia się tylko w WebKit , przeglądarki, które nie obsługują pointer-events mogą być ignorowane.

Answer 2

Możesz dodać div wokół przycisku (z marginesem co, 20px?) Z tym samym js/jquery związanym z nim. W ten sposób, gdyby nie kliknęli (lol), skrypt nadal będzie strzelał. Zauważyłem jednak, że jeśli przycisk myszy zostanie naciśnięty podczas jej naciśnięcia, przycisk nic nie da (nie dzieje się to tylko na twojej stronie, tj. Spróbuj za pomocą przycisków logowania na Facebooku lub nawet przycisków na tej stronie) .

Answer 3

Tutaj próbujesz przeciągnij zamiast go klikać. Dlatego możesz spróbować zdarzenia mousedown.

//This is same as click event 
var down = false; 
var button = document.getElementById('button'); 
var info = document.getElementById('info') 
button.addEventListener('mousedown', function() { 
    down = true; 
}); 


button.addEventListener('mouseup', function() { 
    if(down){ 
     info.innerHTML += "click "; 
     down = false; 
    } 
}); 

jsfiddle

Answer 4

Jeśli nie znaleźć inne rozwiązanie, można użyć zdarzenia zamiast zdarzenia clickmousedown.

To nie jest najlepsze rozwiązanie, ponieważ zachowuje się inaczej niż zwykle. Zwykle użytkownik spodziewa się, że akcja zostanie wykonana po zwolnieniu palca z przycisku myszy. Nie wtedy, gdy palec trzyma przycisk myszy w dół.