Μιλώντας για την ύπαρξη ενός στοιχείου DIV, υπάρχει ένα στοιχείο IMG και ένα στοιχείο SPAN μέσα, μην ανησυχείτε για το πώς είναι τοποθετημένα αυτά τα δύο εσωτερικά στοιχεία, δεν είναι αυτό το σημείο που θέλω να συζητήσω.
Για να πετύχω κάποια ειδικά εφέ, πρέπει να χρησιμοποιήσω τα συμβάντα onmouseover και onmouseout του TD και όταν το δοκιμάσω, θα βρω την ακόλουθη κατάσταση:
Όταν το ποντίκι μετακινείται μέσα στο DIV, ενεργοποιείται το συμβάν onmouseover. Στη συνέχεια, μετακινήστε το ποντίκι στο στοιχείο IMG ή SPAN μέσα στο DIV, σίγουρα δεν πιστεύουμε ότι το ποντίκι έχει μετακινηθεί στο εξωτερικό του DIV, αλλά το περίεργο είναι ότι ενεργοποιείται το συμβάν onmouseout και το συμβάν onmouseover ενεργοποιείται επίσης αμέσως.
Αυτό δεν είναι αυτό που θέλω, οπότε πώς μπορώ να "μπλοκάρω" την παρεμβολή συμβάντων Javascrip{filtering}t που προκαλούνται από εσωτερικά στοιχεία σε εξωτερικά στοιχεία;
Ακολουθούν δύο μέθοδοι:
1. setTimeout
Επειδή αφού το ποντίκι μετακινηθεί πάνω από το εσωτερικό στοιχείο και ενεργοποιήσει το συμβάν onmouseout του εξωτερικού στοιχείου, το onmouseover του εξωτερικού στοιχείου θα ενεργοποιηθεί επίσης αμέσως, επομένως χρειάζεται μόνο να καθυστερήσουμε την ενέργεια που πρέπει να εκτελέσει το συμβάν onmouseout του εξωτερικού στοιχείου για σύντομο χρονικό διάστημα για να εκτελεστεί και, στη συνέχεια, να εκτελέσουμε τη μέθοδο clearTimeout στο συμβάν onmouseover, ώστε να αποφευχθεί η παρεμβολή συμβάντος που προκαλείται από το εσωτερικό στοιχείο.
Δείτε το παρακάτω σχήμα για τη συγκεκριμένη διαδικασία εκτέλεσης (η κάθετη διακεκομμένη γραμμή αντιπροσωπεύει το χρόνο):
Αυτή είναι μια έξυπνη προσέγγιση, γιατί όταν ενεργοποιείται το onmouseout, η ουσιαστική μέθοδος δεν εκτελείται αμέσως, αλλά περιμένει για μικρό χρονικό διάστημα. Εάν το συμβάν onmouseover ενεργοποιηθεί αμέσως κατά τη διάρκεια αυτής της περιόδου, τότε είναι βασικά βέβαιο ότι το συμβάν onmouseout ενεργοποιείται λόγω παρεμβολών από εσωτερικά στοιχεία, επομένως χρησιμοποιήστε το clearTimeout στο συμβάν onmouseover για να αποτρέψετε την εκτέλεση της καθυστερημένης μεθόδου.
2. Περιέχει
Κάντε την ακόλουθη κρίση όταν περνάτε με το ποντίκι και, στη συνέχεια, εκτελέστε το σώμα της μεθόδου όταν το αποτέλεσμα είναι αληθές:
Κάντε την ακόλουθη κρίση όταν βρίσκεστε με το ποντίκι και, στη συνέχεια, εκτελέστε το σώμα της μεθόδου όταν το αποτέλεσμα είναι αληθές:
Ακολουθεί μια εξήγηση της σημασίας των παραπάνω δύο γραμμών κώδικα:
Στον IE, όλα τα στοιχεία HTML έχουν μια μέθοδο περιέχει που καθορίζει εάν το τρέχον στοιχείο περιέχει ένα καθορισμένο στοιχείο. Χρησιμοποιούμε αυτήν τη μέθοδο για να προσδιορίσουμε εάν ένα συμβάν ενός εξωτερικού στοιχείου ενεργοποιείται από ένα εσωτερικό στοιχείο και εάν ένα εσωτερικό στοιχείο προκαλεί την ενεργοποίηση ενός ανεπιθύμητου συμβάντος, τότε αγνοούμε αυτό το συμβάν.
event.fromElement δείχνει το στοιχείο από το οποίο φεύγει το ποντίκι όταν ενεργοποιούνται τα συμβάντα onmouseover και onmouseout. event.toElement δείχνει το στοιχείο που εισάγει το ποντίκι όταν ενεργοποιούνται τα συμβάντα onmouseover και onmouseout.
Έτσι, η έννοια των δύο παραπάνω γραμμών κώδικα είναι:
- Όταν ενεργοποιείται το συμβάν onmouseover, καθορίζει εάν το στοιχείο που αφήνει το ποντίκι είναι εσωτερικό στοιχείο του τρέχοντος στοιχείου και, εάν ναι, αγνοεί αυτό το συμβάν.
- Όταν ενεργοποιείται το συμβάν onmouseout, κρίνετε εάν το στοιχείο που εισάγεται από το ποντίκι είναι εσωτερικό στοιχείο του τρέχοντος στοιχείου και, εάν ναι, αγνοήστε αυτό το συμβάν.
Με αυτόν τον τρόπο, το εσωτερικό στοιχείο δεν παρεμβαίνει στα συμβάντα onmouseover και onmouseout του εξωτερικού στοιχείου.
Αλλά το πρόβλημα είναι και πάλι, τα προγράμματα περιήγησης που δεν είναι IE δεν υποστηρίζουν τη λειτουργία contain, αλλά τώρα που γνωρίζουμε τη λειτουργία της συνάρτησης contain, μπορούμε να προσθέσουμε τον ακόλουθο κώδικα για να προσθέσουμε τον ακόλουθο κώδικα για να προσθέσουμε υποστήριξη για προγράμματα περιήγησης που δεν είναι IE:
Οι παραπάνω μέθοδοι δεν είναι συμβατές με τον Firefox:
Το θέμα είναι το jQuery:
jΕρώτημαΧρησιμοποιήστε το mouseleave αντί για το mouseout, για να μην συμβεί αυτό που λέγεται παραπάνω.
Επίσης, το mouseover θα ενεργοποιείται επανειλημμένα, απλώς χρησιμοποιήστε το mouseenter.
Τέλεια λύση~
|
Δημοσιεύτηκε στις 17/12/2018 2:57:53 μ.μ.
|
|
|
|
