Di chuyển phần tử hoạt động mất sự kiện di chuột trong trình khám phá internet

Trong thư viện tôi đang sử dụng, tôi có nhiệm vụ di chuyển một phần tử sang mặt trước của mái vòm khi nó được di chuột qua. (Tôi làm cho nó lớn hơn vì vậy tôi cần phải nhìn thấy nó, sau đó thu nhỏ lại khi chuột ra).Di chuyển phần tử hoạt động mất sự kiện di chuột trong trình khám phá internet

Thư viện tôi đang sử dụng có giải pháp gọn gàng, sử dụng appendChildren trên phần tử hoạt động để di chuyển nó đến phần cuối của phần tử gốc để tiến tới phần cuối của vòm và bật lên trên cùng.

Vấn đề là tôi tin rằng vì yếu tố bạn đang di chuyển là thứ bạn đang di chuột qua sự kiện di chuột bị mất. Con chuột của bạn vẫn còn trên nút nhưng sự kiện mouseout không được kích hoạt.

Tôi đã tước chức năng xuống để xác nhận sự cố. Nó hoạt động tốt trong firefox nhưng không có trong bất kỳ phiên bản nào của IE. Tôi đang sử dụng jquery ở đây cho tốc độ. Các giải pháp có thể nằm trong javascript cũ đơn giản .. đó là sở thích vì nó có thể cần phải quay lại luồng.

Tôi không thể sử dụng chỉ mục z ở đây vì các phần tử là vml, thư viện là Raphael và tôi đang sử dụng cuộc gọi toFront. Mẫu sử dụng ul/li để hiển thị vấn đề trong một ví dụ đơn giản

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<script src="js/jquery.min.js" type="text/javascript"></script> 
<style> 
    li 
    { 
     border:1px solid black; 
    } 
</style> 
</head> 
<body> 
<ul><li>Test 1</li></ul> 
<ul><li>Test 2</li></ul> 
<ul><li>Test 3</li></ul> 
<ul><li>Test 4</li></ul> 
<script> 
$(function(){ 
    $("li").mouseover(function(){ 
     $(this).css("border-color","red"); 
     this.parentNode.appendChild(this); 
    }); 

    $("li").mouseout(function(){ 
     $(this).css("border-color","black"); 
    }); 
}); 
</script> 
</body> 
</html>

Edit: Đây là một liên kết đến một js dán bin để xem nó trong hành động. http://jsbin.com/obesa4

** Chỉnh sửa 2: ** Xem tất cả nhận xét về tất cả các câu trả lời trước khi đăng bài như nhiều thông tin khác trong đó.

Nguồn

2010-09-10 johnwards

tôi không thể hiểu được bài đăng của bạn. bạn muốn sự kiện 'mouseout' kích hoạt trong khi con chuột của bạn vẫn ở trên phần tử? câu hỏi thực sự của bạn là gì? – lincolnk

Và đối với this.parentNode.appendChild (this) ;, bạn đang cố gắng thêm lại phần tử LI hiện có? Tại sao không chỉ thêm một lớp CSS vào nó thay vì thêm/loại bỏ cùng một thành phần với CSS mới? Hoặc mã ban đầu của bạn có liên quan đến việc thêm một phần tử hoàn toàn mới từ một nơi nào khác bên trong UL để bắt chước hiệu ứng kích thước "mở rộng" của bạn mà bạn đã đề cập trong phần đầu? – Gary

Linkol Tôi đang cố gắng để có được mã mẫu để làm việc trong tức là giống như nó trong firefox. Sự kiện mouseout không kích hoạt. Tôi đang sử dụng các phần tử li làm ví dụ. Như tôi đã nói trong bài viết của mình, các phần tử thực sự là các phần tử VML. Vì vậy, những thứ như z-index hoặc thêm các lớp học sẽ không hoạt động, trừ khi mọi người có thể chứng minh khác nhau. – johnwards

Vấn đề là IE xử lý mouseover khác nhau, vì nó hoạt động như mouseenter và mousemove kết hợp trên một phần tử. Trong các trình duyệt khác, nó chỉ là mouseenter. Vì vậy, ngay cả sau khi con chuột của bạn đã nhập phần tử mục tiêu và bạn đã thay đổi giao diện và đăng ký lại thành phụ huynh mouseover sẽ vẫn kích hoạt mọi chuyển động của chuột, phần tử này sẽ được áp dụng lại. được gọi là.

Giải pháp là mô phỏng hành vi mouseover chính xác để hành động trong onmouseover chỉ được thực hiện một lần.

$("li").mouseover(function() { 
    // make sure these actions are executed only once 
    if (this.style.borderColor != "red") { 
     this.style.borderColor = "red"; 
     this.parentNode.appendChild(this); 
    } 
});

Ví dụ

Extented demo of yours
Example chứng minh sự khác biệt mouseover giữa các trình duyệt (bonus: javascript mẹ đẻ)

Nguồn

2010-10-23 22:14:44 galambalazs

Brilliant, chính xác những gì tôi đã hy vọng cho khi tôi thiết lập tiền thưởng lên. Mã của tôi đang hoạt động tốt hơn nhiều bây giờ tôi không phải hack nó nữa. – johnwards

Tôi gald tôi có thể giúp :) – galambalazs

Dưới đây là một ví dụ đơn giản trong Raphael 2.0.2 http://jsfiddle.net/K2bSY/2/ cho những người gặp phải vấn đề tương tự bằng cách sử dụng toFront(), hiển thị một ví dụ sửa chữa bằng cách sử dụng Raphael's. data() chức năng – user568458

Điều đó thật tuyệt vời và dường như chỉ là trình duyệt IE (nhưng VML). Nếu phần tử cha có chiều cao được chỉ định, bạn có thể đính kèm trình xử lý chuột vào cha mẹ ... nhưng có vẻ như điều đó sẽ không hoạt động trong tình huống của bạn. Lựa chọn tốt nhất của bạn là sử dụng di chuột qua trên các phần tử lân cận để ẩn nó:

$(function() 
{ 
    $("li").mouseover(function() 
    { 
     $("li").css("border-color", "black"); 
     $(this).css("border-color", "red"); 
     this.parentNode.appendChild(this); 
    }); 
});

Hoặc SVG. Bạn có thể sử dụng z-index trong SVG.

Nguồn

2010-09-11 00:53:14 gilly3

Hmm thay thế là tôi nghĩ rằng giải pháp ở đây. Về cơ bản tôi sẽ cần phải gọi một chức năng đặt lại trên tất cả các yếu tố khác trên di chuột mà sẽ cháy các hình ảnh động thu nhỏ. Nó rất clunky nhưng nó có thể làm việc. Tôi sẽ bỏ phiếu cho câu trả lời này ngay bây giờ và xem liệu có ai khác có thể nghĩ ra điều gì đó không. – johnwards

tôi đã có thể để có được nó làm việc với các div lồng nhau và một sự kiện mouseenter trên phụ huynh:

<div id="frame"> 
    <div class='box'></div> 
    <div class='box'></div> 
    <div class='box'></div> 
    <div class='box'></div> 
</div> 
... 
$('#frame').mouseenter(function() { 
    $(".box").css("border-color", "black"); 
});

Dưới đây là một phiên bản làm việc sử dụng Raphael:

http://jsfiddle.net/xDREx/

Nguồn

2010-10-20 19:06:12 webXL

Có thể làm được điều đó. Không có gì xảy ra khi tôi di chuột qua các ô. – johnwards

Bạn đã thử liên kết chưa? Bạn đang dùng trình duyệt nào? Tôi nhận được nó để làm việc trong IE6, IE7 & IE8. – webXL

Ooh mouseenter về cha mẹ, đó là cơ bản những gì bạn đang làm. Mà các thiết lập lại. Tốt đẹp. Tuy nhiên nó không giải quyết được vấn đề cốt lõi của các sự kiện bị mất. (Click vào sự kiện quá!) Deffo trị giá một nửa 200 điểm mặc dù. Nếu tôi có thể nhận được yếu tố để có được lên hàng đầu với ra mất sự kiện tôi muốn được một người đàn ông hạnh phúc. (JSFiddle phải đã xuống, làm việc tuyệt vời bây giờ) – johnwards

tôi sửa đổi câu trả lời @galambalazs' bởi vì tôi thấy rằng nó thất bại nếu tôi lơ lửng thực sự nhanh chóng trên các phần tử li, như một số của các yếu tố vẫn sẽ giữ lại hiệu ứng mouseover.

Tôi đã đưa ra giải pháp loại bỏ trạng thái di chuột trên các thành phần không thể kích hoạt sự kiện mouseover bằng cách đẩy các thành phần này vào ngăn xếp bất cứ khi nào mouseover thậm chí được kích hoạt. Bất cứ lúc nào một trong hai sự kiện mouseover hoặc mouseout được gọi, tôi bật các yếu tố từ mảng này và loại bỏ các kiểu đặt trên nó:

$(function(){ 

    // Track any hovered elements 
    window.hovered = []; 

    $("li").mouseover(function() { 
     // make sure that these actions happen only once 
     if ($(this).css("border-color") != "red") { 
      resetHovered(); // Reset any previous hovered elements 
      $(this).css("border-color","red"); 
      this.parentNode.appendChild(this); 
      hovered.push(this); 
     } 
    }); 

    $("li").mouseout(function(){ 
     resetHovered(); // Reset any previous hovered elements 
    }); 

    // Reset any elements on the stack 
    function resetHovered() { 
     while (hovered.length > 0) { 
      var elem = hovered.pop(); 
      $(elem).css("border-color","black"); 
     } 
    } 
});

Tôi đã thử nghiệm giải pháp này với IE 11. Một ví dụ chức năng có thể được tìm thấy here.

Nguồn

2014-05-23 21:28:22

Di chuyển phần tử hoạt động mất sự kiện di chuột trong trình khám phá internet

Trả lời

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