Πρόβλημα με mouseover mouseout

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Πρόβλημα με mouseover mouseout

Δημοσίευση από cpulse » 24 Μαρ 2008 01:38

Έχω ένα HTML το οποίο σε απλουστευμένη μορφή είναι κάπως έτσι

Κώδικας: Επιλογή όλων

<div>
	<h1>titlos</h1>
	keimeno
</div>
Κάνω hook στο div για να ενημερώνομαι για τα events mouse over και mouse out. Το πρόβλημα είναι οτι όταν το mouse περνάει πάνω από το <h1> το σύστημα κάνει trigger το event mouse out στο <div>.

Ξέρει κανείς αν υπάρχει κανένας απλός τρόπος να πάρεις εννοποιημένα events από μια τέτοια δομή;

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Πρόβλημα με mouseover mouseout

Δημοσίευση από cpulse » 24 Μαρ 2008 02:02

Ουσιαστικά ψάχνω μια cross-browser εφαρμογή των onmouseenter και onmouseleave.
:-?

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πρόβλημα με mouseover mouseout

Δημοσίευση από skeftomilos » 24 Μαρ 2008 02:50

Το έχω συναντήσει αυτό το πρόβλημα, και το αντιμετώπισα πρόχειρα βάζοντας timer στη στιγμιαία μετάβαση από το εξωτερικό στο εσωτερικό element. Αλλά λογικά θα υπάρχει καλύτερος τρόπος, πιθανόν με την τρίτη παράμετρο useCapture του addEventListener.
addEventListener(type, listener, useCapture)

useCapture
If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTargets beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events for a detailed explanation.
- DOM:element.addEventListener

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πρόβλημα με mouseover mouseout

Δημοσίευση από skeftomilos » 24 Μαρ 2008 05:02

Τελικά δεν είναι θέμα capturing ή bubbling. Απλά οι άλλοι browsers τυχαίνει να μην έχουν υλοποιήσει αυτά τα χρήσιμα events του IE. Η παρακάτω ρουτίνα λύνει το πρόβλημα:

Κώδικας: Επιλογή όλων

function isMouseEnterOrLeave&#40;element, e&#41; &#123;
  if &#40;e.type != 'mouseout' && e.type != 'mouseover'&#41; return false
  var relatedTarget = e.relatedTarget || &#40;e.type == 'mouseout' ? e.toElement &#58; e.fromElement&#41;
  while &#40;relatedTarget && relatedTarget != element&#41; &#123;
    relatedTarget = relatedTarget.parentNode
  &#125;
  return relatedTarget != element
&#125;
Μπορεί να χρησιμοποιηθεί ως εξής:

Κώδικας: Επιλογή όλων

document.getElementById&#40;'container'&#41;.onmouseover = function&#40;e&#41; &#123;
  if &#40;isMouseEnterOrLeave&#40;this, e || window.event&#41;&#41; &#123;
    alert&#40;'Enter'&#41;
  &#125;
&#125;

document.getElementById&#40;'container'&#41;.onmouseout = function&#40;e&#41; &#123;
  if &#40;isMouseEnterOrLeave&#40;this, e || window.event&#41;&#41; &#123;
    alert&#40;'Leave'&#41;
  &#125;
&#125;
Άλλη λύση είναι η χρήση jQuery, dojo, mootools ή Prototype που διαθέτουν cross-browser υλοποιήσεις των onmousenter, onmouseleave.

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Πρόβλημα με mouseover mouseout

Δημοσίευση από cpulse » 24 Μαρ 2008 12:28

Τέεεελειο! :)

Είχα φτιάξει κι εγώ μια εφαρμογή που έβρισκε όλα τα subelements και τους κόλαγε events και με timers αποφάσιζε για το mouseenter mouseleave αλλά είναι περίπου 60 γραμμές κώδικας. Αυτός είναι πολύ καλύτερος.

Thanx master Skeftomile :)

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πρόβλημα με mouseover mouseout

Δημοσίευση από skeftomilos » 24 Μαρ 2008 18:09

Παρακαλώ, αλλά δεν είναι δικό μου το script. Αυτός που το έγραψε είναι κάποιος από αυτούς, οι υπόλοιποι copy-paste. :-)

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Πρόβλημα με mouseover mouseout

Δημοσίευση από cpulse » 25 Μαρ 2008 16:00

Είχα κάνει μια μικρή έρευνα πριν κάνω το post. Βρήκα κάποια διάσπαρτα πράγματα αλλά ο καθένας έλεγε τα δικά του.

Λοιπόν αυτός ο τρόπος λειτούργησε με εξαίρεση σε ένα μενουδάκι που φτιάχνω, στο οποίο τα elements βγαίνουν με δυναμικό τρόπο. Το έχω εξοπλίσει με διάφορα κολπάκια μεταξύ των οποίων και στρογγυλές γωνίες με διαφανή μέρη. Δυστυχώς το script αυτό δεν λειτούργησε στον IE6. Μετά από πολύ ψάξιμο βρήκα οτι αν στον IE6 αλλάξεις το width ενός δυναμικού element αυτό το script δεν λειτουργεί.

Θα θελα να γνωρίσω αυτό τον υπέρτατο Θεό προγραμματιστή που έφτιαξε αυτόν τον IE6!!!

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πρόβλημα με mouseover mouseout

Δημοσίευση από skeftomilos » 25 Μαρ 2008 19:55

Αν τυχόν τον συναντήσεις μην παραλείψεις να γνωρίσεις και τον ακόμα πιο υπέρτατο ξάδελφό του που έφτιαξε τον NN4. :-) Ο IE6 δεν είναι κακός browser για την εποχή που φτιάχτηκε. Το πρόβλημα είναι ότι οι απαιτήσεις αυξάνονταν σταθερά κατά την πενταετία 2001-2006 που η Microsoft αδρανούσε, και σήμερα ο IE6 είναι ακόμα μαζί μας, και όλα του bugs - ακόμα και τα πιο ενδόμυχα - έχουν βγει στη φόρα.

Επί του θέματος θα πρότεινα να χρησιμοποιήσεις τα native onmouseenter, onmouseleave του IE, και το script για τους υπόλοιπους browsers.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Πρόβλημα με mouseover mouseout

Δημοσίευση από skeftomilos » 26 Μαρ 2008 02:15

Εικόνα

:-)

Άβαταρ μέλους
cpulse
Script Master
Δημοσιεύσεις: 1527
Εγγραφή: 21 Μαρ 2006 19:30
Τοποθεσία: Αθήνα village
Επικοινωνία:

Πρόβλημα με mouseover mouseout

Δημοσίευση από cpulse » 26 Μαρ 2008 15:13

χαχα ετσι ετσι!

Με αυτά που μας κάνουνε θα εκλείψουμε στο τέλος. Θα αρχίσουμε να μας αποκαλούμε developers developers.

Save the developers developers.
Πως λέμε careta careta;

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης