Thiếu sự kiện nhấp cho <span> bên trong <button> yếu tố trên firefox

Question

Tôi đang gặp sự cố với Firefox 32 khi tôi liên kết hành động với sự kiện nhấp chuột của phần tử span trong phần tử nút. Các trình duyệt khác có vẻ hoạt động tốt.

Ở đây, code illustrating the issue on jsFiddle.

<span onClick="alert('test');">**Working**</span><br> 
<button>inside a button <span onClick="alert('test');">**Not working**</span></button> 

Có ai biết tại sao và nếu đó là lỗi hoặc tính năng?

Answer 1

Như xa như tôi biết cách nhấn vào yếu tố con sẽ không hoạt động vì nó được lồng trong một nút. Nút không phải là vùng chứa cho phần tử con - chỉ dành cho văn bản.

Nếu bạn cố gắng như dưới đây, bạn luôn biết rằng bạn đã nhấp vào nút.

 <button type="button" onclick="alert('You clicked the button!');"> 
     inside a button <span onClick="alert('clicked span');">**Not working**</span> 
     </button> 

Vì vậy, đề nghị của tôi là sử dụng một khoảng thời gian hoặc một div

 <div class="button_replace"> 
     inside a div <span onClick="alert('clicked span');">**working**</span> 
     </div> 

Hy vọng nó sẽ giúp ...

Lưu ý: Mã của bạn sẽ làm việc trong chrome nhưng không phải trong firefox và tôi câu trả lời là giải pháp thay thế để thực hiện công việc trong firefox

Answer 2

Thêm một con trỏ-sự kiện vào nút của bạn trong css như:

button span { 
 
    pointer-events: none; 
 
}

Nhấp chuột vào các yếu tố nút sẽ bị bỏ qua

Answer 3

Bạn phải thêm thuộc tính pointer-events vào span phần tử.

button span { 
    pointer-events: none; 
}