Cách kiểm tra phần tử chỉ tồn tại nếu chuột ở vị trí cụ thể

Question

Nếu bạn cần kiểm tra trạng thái di chuột của một phần tử, nó có thể được thực hiện như mô tả here Vấn đề là bạn mất trạng thái nếu bạn di chuyển chuột.

Trong trường hợp của tôi, javascript của nó cung cấp hiệu ứng hình ảnh khi di chuột qua. Vì vậy, về cơ bản vấn đề là giống như mô tả ở trên, nhưng giải pháp không áp dụng.

Nếu bạn truy cập: http://volkshotel.nl/ và di chuột qua nút/liên kết, bạn sẽ thấy hiệu ứng trục trặc tốt đẹp. Nhưng khó kiểm tra. Tôi đã trích xuất một nút

<span class="buzz"> 
    <span class="buzz-original-text">Show me the way</span> 
    <span class="buzz-container"></span> 
</span> 

Bây giờ nếu hiệu ứng trục trặc được áp dụng xảy ra bên trong phần tử buzz-container, nhưng có vẻ như không thể kiểm tra yếu tố đó. Có cách nào đó bên trong Chrome để kiểm tra nó không?

Answer 1

Bạn có thể thiết lập trạng thái yếu tố trong Chrome DevTools:

Nếu bạn muốn Chrome phá vỡ trình xử lý sự kiện, bạn có thể đặt điều này trong tab nguồn:

Trong trường hợp của bạn, bây giờ bạn có thể bước qua mã cho đến khi các yếu tố mà bạn muốn kiểm tra được tạo ra (F11 lần) kết quả là:

<span class="buzz-container"><span class="buzz-wrap" style="width: 109px; transform: translate(-0.631288939155638px, 0px);"><span class="buzz-target" style="transform: translate(0px, 0px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.245302784256637px, 2px);"><span class="buzz-target" style="transform: translate(0px, -2px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(-1.24612329155207px, 4px);"><span class="buzz-target" style="transform: translate(0px, -4px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(1.63969129044563px, 6px);"><span class="buzz-target" style="transform: translate(0px, -6px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(1.5060622766614px, 8px);"><span class="buzz-target" style="transform: translate(0px, -8px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.929074209183455px, 10px);"><span class="buzz-target" style="transform: translate(0px, -10px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.889030547812581px, 12px);"><span class="buzz-target" style="transform: translate(0px, -12px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(1.0943416710943px, 14px);"><span class="buzz-target" style="transform: translate(0px, -14px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.936934390105307px, 16px);"><span class="buzz-target" style="transform: translate(0px, -16px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.647303706966341px, 18px);"><span class="buzz-target" style="transform: translate(0px, -18px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.526725108735263px, 20px);"><span class="buzz-target" style="transform: translate(0px, -20px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(0.622202496044338px, 22px);"><span class="buzz-target" style="transform: translate(0px, -22px);">Eat &amp; Drink</span></span><span class="buzz-wrap" style="width: 109px; transform: translate(-1.97411663923413px, 24px);"><span class="buzz-target" style="transform: translate(0px, -24px);">Eat &amp; Drink</span></span></span> 

Answer 2

Có thể chỉ cần sử dụng Javascript để đổ nó vào bàn điều khiển? (! Chưa được kiểm tra) Ví dụ, với JQuery ...

$("#element").mouseover(function(e) { 
    console.log(e); 
}); 

Đối với vấn đề cụ thể của bạn có lẽ một cái gì đó như thế này

$(".buzz").mouseover(function(e) { 
    $(e.target).find('.buzz-container').each(function(idx, child){ 
     console.log(child); 
    }); 
}); 

Answer 3

Bạn đang sử dụng JavaScript để xử lý chuột lên sự kiện. Một cách có thể để gỡ lỗi sự cố là để sử dụng JavaScript để kích hoạt sự kiện.

1. Bạn có thể xác định vị trí các phần tử bằng cách sử dụng kính lúp biểu tượng trong thanh tra yếu tố nếu bấm chuột phải> kiểm tra nguyên tố không hoạt động
2. Sử dụng sử dụng $(element).trigger("mouseover") để bắn các sự kiện mouseover
3. Nếu cần thiết, loại bỏ các trình xử lý sự kiện mouseout sử dụng `$ (phần tử) .off (" mouseout ")

Sau đó, bạn có thể kiểm tra kết quả. Trong ví dụ của bạn, sự kiện di chuột dường như thêm một số lớp CSS vào phần tử.

Answer 4

Nếu bạn đang sử dụng Chrome DevTools (không biết về các trình duyệt khác), bạn có thể sử dụng điểm dừng trình nghe sự kiện.

Chuyển đến tab Nguồn của DevTools của bạn, mở rộng phần Breakener Event Listener ở bên phải, mở rộng Chuột và chọn hộp di chuột qua.

Sau đó, đặt chuột lên liên kết của bạn: trình gỡ lỗi sẽ dừng trong hàm JavaScript làm thay đổi kiểu của liên kết của bạn.Nhấn F10 cho đến khi bạn kết thúc chức năng đó: liên kết của bạn bây giờ đã thay đổi kiểu và bạn có thể kiểm tra nó theo ý muốn trong tab Yếu tố.