Move Active Element يفقد حدث Mouseout في Internet Explorer

StackOverflow https://stackoverflow.com/questions/3686132

سؤال

في مكتبة ، أستخدمها ، لدي مهمة نقل عنصر إلى مقدمة DOM عندما يتم تحومها. (أجعلها أكبر لذا أحتاج إلى رؤيتها ، ثم تقليصها عند الخروج).

تحتوي المكتبة التي أستخدمها على حل أنيق يستخدم تذييلات التذييل على العنصر النشط لنقله إلى نهاية الوالدين حتى أبعد من نهاية دوم وبدوره في الأعلى.

المشكلة هي أنني أعتقد أنه نظرًا لأن العنصر الذي تنقله هو العنصر الذي تحومه على حدث ماوس. لا يزال الماوس الخاص بك فوق العقدة ولكن حدث الفأر لم يتم إطلاقه.

لقد جردت الوظيفة لأسفل لتأكيد المشكلة. إنه يعمل بشكل جيد في Firefox ولكن ليس في أي إصدار من IE. أنا أستخدم jQuery هنا للسرعة. يمكن أن تكون الحلول في JavaScript القديمة السهلة .. والتي ستكون تفضيلًا لأنها قد تحتاج إلى العودة إلى الدفق.

لا يمكنني استخدام Z-index هنا لأن العناصر هي VML ، والمكتبة هي Raphael وأنا أستخدم مكالمة Tofront. عينة باستخدام UL/LI لإظهار المشكلة في مثال بسيط

<!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>

يحرر: فيما يلي رابط إلى صندوق معجون JS لرؤيته في العمل. http://jsbin.com/obesa4

** تحرير 2: ** شاهد جميع التعليقات على جميع الإجابات قبل نشر المزيد من المعلومات في ذلك.

هل كانت مفيدة؟

المحلول

المشكلة هي أي مقابض mouseover بشكل مختلف, ، لأنه يتصرف مثل mouseenter و mousemove مجتمعة على عنصر. في متصفحات أخرى ، إنه فقط mouseenter.

لذا ، حتى بعد أن دخل الماوس العنصر المستهدف وقمت بتغييره ، فقد أعادته إلى الوالدين mouseover سيظل يطلق النار على كل حركة من الماوس ، ويتم إعادة عرض العنصر مرة أخرى ، مما يمنع معالجات الأحداث الآخرين من الاتصال.

الحل هو محاكاة الصحيح mouseover السلوك بحيث في الإجراءات في onmouseover يتم تنفيذها مرة واحدة فقط.

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

أمثلة

  1. التوضيح الخاص بك
  2. مثال إظهار mouseover الفرق بين المتصفحات (المكافأة: JavaScript الأصلي)

نصائح أخرى

تمكنت من العمل مع divs المتداخلة وحدث الفأر على الوالد:

<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");
});

إليك نسخة عمل باستخدام Raphael:

http://jsfiddle.net/xdrex/

لقد قمت بتعديل إجابة Galambalazs لأنني وجدت أنها فشلت إذا تحومت بسرعة على عناصر LI ، لأن بعض العناصر ستظل تحتفظ بـ mouseover تأثير.

توصلت إلى حل يزيل حالة التحويم على العناصر التي فشلت في تشغيل mouseover الحدث عن طريق دفع هذه العناصر إلى كومة كلما mouseover حتى يتم تشغيله. في أي وقت إما mouseover أو mouseout يسمى الحدث ، أنا أخرج العناصر من هذه الصفيف وإزالة الأنماط الموضوعة عليها:

$(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");
        }
    }
});

لقد اختبرت هذا الحل مع IE 11. يمكن العثور على مثال وظيفي هنا.

هذا متزعزع ، ويبدو أنه كان IE فقط (ولكن كذلك VML). إذا كان العنصر الأصل يحتوي على ارتفاع محدد ، فيمكنك إرفاق معالج الماوس بالوالد ... لكن يبدو أن هذا لن يعمل في وضعك. أفضل بديل لك هو استخدام Mouseover على العناصر المجاورة لإخفائه:

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

أو SVG. يمكنك استخدام Z-Index في SVG.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top