Kiểm tra phần tử chỉ xuất hiện khi phần tử khác được di chuột qua / nhập

Thường thì tôi muốn kiểm tra một phần tử (ví dụ: chú giải công cụ) chỉ xuất hiện khi một phần tử khác được di chuột qua / nhập. Phần tử xuất hiện, được hiển thị thông qua sự kiện mouseenter của jQuery.

Tôi không thể kiểm tra chú giải công cụ, vì chú giải công cụ biến mất khi con chuột của tôi rời khỏi phần tử chứa.

Có cách nào để tạm dừng các sự kiện JS để tôi có thể di chuột vào phần tử, sau đó tạm dừng JS của trình duyệt và kiểm tra thành công không?

Ví dụ: hãy thử kiểm tra chú giải công cụ của Twitter bootstrap: http://getbootstrap.com/javascript/#tooltips .

Nó khá dễ dàng trong Chrome 38.0.2094.0.

Đây là những gì nó sẽ trông như thế nào:

Từng bước một:

1. Mở DevTools trong bảng Nguồn
2. Làm cho chú giải công cụ xuất hiện bằng cách di chuột qua nút
3. Nhấn F8 để đóng băng trang
4. Chuyển sang bảng Elements và sử dụng biểu tượng kính lúp ở trên cùng bên trái để chọn chú giải công cụ

Nếu chú giải công cụ hiển thị do CSS, đây là những gì bạn có thể làm trong trường hợp đó:

Từng bước một:

1. Mở DevTools
2. Chọn phần tử kích hoạt trong các công cụ dành cho nhà phát triển (liên kết)
3. Nhấp chuột phải, và chọn "trạng thái phần tử lực" và chọn ": di chuột"
4. Kiểm tra chú giải công cụ CSS

Cả hai của Safari và Web Inspector cung cấp hộp kiểm của Chrome, nơi bạn có thể chuyển đổi các :active, :focus, :hovervà :visitedtrạng thái của một phần tử. Sử dụng chúng thậm chí có thể dễ dàng hơn.

Safari:

Trình duyệt Chrome:

Cũng có một cách phức tạp khác để làm điều đó:

1. Xem qua phần tử làm cho chú giải công cụ của bạn xuất hiện.
2. Nhấp chuột phải để mở menu ngữ cảnh.
3. Di chuyển chuột đến cửa sổ công cụ dành cho nhà phát triển của bạn và nhấp chuột trái vào bất kỳ đâu trong bảng công cụ nhà phát triển.

Chú giải công cụ của bạn sẽ vẫn hiển thị, sau đó bạn có thể kiểm tra chú giải đó trong tab Yếu tố.

Đã thử nghiệm trên Chrome. Dường như không hoạt động trên Firefox.

Mặc dù câu trả lời của @ SomeGuy là tuyệt vời (t-up cho ảnh gif động), nhưng bạn luôn có thể làm điều đó theo chương trình. Chỉ cần mở bảng điều khiển và nhập tên sự kiện

document.getElementById('id').dispatchEvent(new Event('event-type'));

(với cú pháp cụ thể của javascript thuần túy có thể khác nhau tùy theo trình duyệt)

Thậm chí dễ dàng hơn với jQuery:

$('#id').trigger('event-type');

Trong ví dụ của bạn ( http://getbootstrap.com/javascript/#tooltips ), hãy mở bảng điều khiển và nhập, ví dụ:

$("button:contains('Tooltip on right')").mouseenter();

Và chú giải công cụ xuất hiện trong DOM và có thể được kiểm tra / sửa đổi theo cách thủ công:

<div style="top: 14406.9px; left: 1048.25px; display: block;"
id="tooltip952596" class="tooltip fade right in" role="tooltip">
<div style="" class="tooltip-arrow"></div>
<div class="tooltip-inner">Tooltip on right</div></div>

Như trong phần nhận xét, nếu bạn di chuyển con trỏ chuột qua khung trang, bạn có thể kích hoạt các sự kiện khác như mouseout. Để tránh điều này, bạn có thể nhấn F8(như trong câu trả lời tài khoản) hoặc gõ debugger;(tương đương với tập lệnh của nó)