kiểm tra ('div') mouseenter trên ('a') mouseleave

Question

vấn đề của tôi là sau: Tôi nhận được trình kích hoạt (a) và cửa sổ bật lên (div). Div không nằm trong lồng.

• Khi tôi di chuột qua, tôi muốn div hiển thị.
• Khi tôi đi từ một đến div, tôi muốn nó luôn hiển thị.
• Khi tôi rời khỏi div, tôi muốn nó đóng lại.
• Khi tôi di chuột qua và thoát mà không nhập div, tôi muốn div đóng lại.

Tôi nhận được hầu hết điều đó đã được tìm ra, nhưng giờ tôi đang đấu tranh với yêu cầu không. 2. Khi kiểm tra mouseleave trên a, tôi kiểm tra nếu có một mouseenter trên div. Nếu có, tôi muốn hủy bỏ mouseleave. Nếu không, tôi muốn đóng div.

Tôi đang làm gì sai? Đây có phải là cách thích hợp để làm điều này không?

Dưới đây là đánh dấu:

<a href="#" class="popup_toggle" style='display:block;width:50px;height:50px;border:1px solid red;position:relative;'>Toggle</a> 
<div class="popup_div" style='position:absolute;top:50px;left:0px;border:1px solid blue;display:none;'>Popup</div> 

Đây là jQuery:

$('.popup_toggle').mouseenter(function() { 
     var element = $(this).next('.popup_div'); 
     $.data(this, 'timer', setTimeout(function() { 
      element.show(100); 
     }, 500)); 
    }); 

    $('.popup_toggle').mouseleave(function() { 
     clearTimeout($.data(this, 'timer')); 
      if($('.popup_div').mouseenter==true) 
      { 
       return false; 
      } 
      else 
      { 
       $('.popup_div').hide(100) 
      }; 
    }); 

Answer 1

Điều bạn đang cố gắng làm là khá đơn giản. Khi nhập trình kích hoạt, hãy xác định bảng (lớp, cửa sổ bật lên, bất kỳ thứ gì), lưu tham chiếu với nhau bằng cách sử dụng .data() và xử lý sự kiện nếu các mục tiêu liên quan là trình kích hoạt (từ chế độ xem bảng điều khiển) hoặc bảng điều khiển (từ chế độ kích hoạt). Tôi đã ném một cái gì đó lại với nhau. Hãy xem nhật ký bảng điều khiển để xem cách thức hoạt động này ... http://jsfiddle.net/rodneyrehm/X5uRD/

Answer 2

Điều đó sẽ rất có thể không hoạt động ... không có. Tôi cũng khuyên bạn nên thêm mouseenter và mouseleave gọi lại cho bạn <div> phần tử và yêu cầu họ đặt biến toàn cục cho các callbacks khác biết cách xử lý sự kiện của họ, nghĩa là "nếu biến toàn cục là đúng, đừng ẩn cửa sổ bật lên mouseleave, nếu không ẩn popup "hoặc một cái gì đó như thế này.

Cách tiếp cận khác sẽ là kiểm tra xem con chuột có ở trong cửa sổ bật lên khi cuộc gọi lại mouseleave cố gắng ẩn cửa sổ bật lên hay không. Đó có thể là công việc nhiều hơn nó là giá trị mặc dù.

Answer 3

Tôi tin rằng vấn đề với việc triển khai của bạn là mouseenter trên div sẽ kích hoạt ngay sau mouseleave từ a.

Điều này sẽ cung cấp cho bạn một cái gì đó như:

$('.popup_toggle').mouseenter(function() { 
    // Clear any pending "hide" timer 
    // Set a show timer 
}); 

$('.popup_toggle').mouseleave(function() { 
    // Clear any pending "show" timer 
    // Set a hide timer 
}); 

$('.popup_div').mouseenter(function() { 
    // Clear any pending "hide" timer 
}); 

Lưu ý rằng bạn sẽ phải chắc chắn rằng bạn truy cập vào timer cùng từ cả hai sự kiện .popup_toggle và sự kiện .popup_div. Bạn có thể cân nhắc sử dụng số doTimeout plugin của Ben Alman để trợ giúp việc này. Nó (thường) kết quả trong mã rõ ràng hơn nhiều so với làm việc theo cách thủ công với setTimeout/clearTimeout.