Xử lý các sự kiện nhấp chuột trên các lớp z-index'd

Tôi có 2 lớp chỉ mục z trong ứng dụng bản đồ mà tôi đang xây dựng. Tôi gặp vấn đề khi tôi nhấp vào các lớp để phóng to. Trình xử lý nhấp chuột nằm trên lớp chỉ mục z cơ bản và tôi không muốn nó kích hoạt khi một điều khiển trong lớp nằm ngang được nhấp vào.Xử lý các sự kiện nhấp chuột trên các lớp z-index'd

Vấn đề tôi có là sự kiện được nâng lên bất kể điều gì nhưng thuộc tính originalTarget của sự kiện không phải là hình ảnh trong lớp cơ bản khi một cái gì đó trên lớp trên cùng được nhấp. Có cách nào để thay đổi điều này không?

Nguồn

2009-06-22 Alex

Nó được gọi là sự kiện sủi bọt, và bạn có thể kiểm soát nó bằng phương pháp event.stopPropagation() (event.cancelBubble() trong IE). Bạn cũng có thể kiểm soát nó bằng cách trả về true/false từ các trình xử lý được gọi bởi các thuộc tính onwhatever trên các phần tử. Đó là một chủ đề khó khăn vì vậy tôi đề nghị bạn làm một số research.

Thông tin: cancelBubble, stopPropagation

Nguồn

2009-06-22 08:34:47 SpliFF

Đây không phải là sự kiện bọt. Sự kiện bubbling sẽ là nơi tôi có trình xử lý sự kiện nhấp chuột trên cả hai phần tử. Tôi chỉ có trình xử lý nhấp chuột ở lớp dưới cùng. – Alex

Sau đó, ý của bạn là gì? "Trình xử lý nhấp chuột nằm trên lớp zindexed nằm bên dưới và tôi không muốn nó kích hoạt khi một điều khiển trong lớp nằm bên trên được nhấp vào." Các điều khiển cũng sử dụng bọt khí. Có lẽ bạn thực sự muốn chụp nhưng không được hỗ trợ bởi IE – SpliFF

Tôi lấy lại nhận xét ban đầu của mình! Nó thực sự là sự kiện sủi bọt, xin lỗi. Tôi đã đề xuất của bạn trên tàu và nhận được nó làm việc :) – Alex

Mặc dù điều này không giải quyết vấn đề trực tiếp có thể là một cách giải quyết khả thi cho đến khi một giải pháp phù hợp hơn trình bày chính nó.

Viết một hàm duy nhất được gọi là onClick và cho phép chức năng đủ thông minh để biết ai đã gọi nó. Hàm này sẽ thực hiện hành động thích hợp dựa trên người đã nhấp vào nó. Bạn có thể gửi nó khá nhiều bất cứ điều gì mà sẽ là duy nhất và sau đó sử dụng một chuyển đổi.

đơn giản ví dụ:

<html> 
<body> 

<script type="text/javascript"> 
function myClickHandle(anID) 
{ 
switch(anID){ 
case 'bottom': 
     alert("I am on the bottom"); 
     break; 
case 'top': 
     alert("I am on the top"); 
     break; 
} 
} 
</script> 

<html> 
<div style="z-index:10"><input type=button value='top' onclick="myClickHandle(this.value)"/></div> 
<div style="z-index:11"><input type=button value='bottom' onclick="myClickHandle(this.value)"/></div> 
</body> 
</html>

Nguồn

2009-06-22 09:25:59

Có cách nào để thực hiện điều này một cách kín đáo? tức là không trộn javascript với html? – Alex

Xin lỗi sau khi mùa hè kết thúc tôi đã không làm cho nó trở lại tràn ngăn xếp cho đến tối nay. Thẻ Script có thể đi trong tiêu đề của bạn hoặc sống trong một số tập tin bên ngoài của nó chỉ vì lợi ích ví dụ. Onclicks phải ở đó để bắt đầu hành động. –

Tôi nghĩ rằng cách tốt nhất là để tách các xử lý sự kiện khi sự kiểm soát di chuyển đến lớp trên và khi kiểm soát được trở lại lớp thấp hơn, bạn có thể lắp lại các sự kiện. ưu tiên

Nguồn

2009-06-23 19:27:25 Shreyas

đến yếu tố người có lớn z-index

http://api.jquery.com/event.stopPropagation/

Nguồn

2010-04-07 11:28:28 Mythos

Xử lý các sự kiện nhấp chuột trên các lớp z-index'd

Trả lời

Các vấn đề liên quan