2 events ταυτόχρονα

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

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

Απάντηση
gapostolis
Δημοσιεύσεις: 4
Εγγραφή: 30 Ιούλ 2005 02:06

2 events ταυτόχρονα

Δημοσίευση από gapostolis » 30 Ιούλ 2005 02:16

Καλησπέρα.

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

<html>
<head>
<script type="text/javascript">
<!--
var bar=0;

function foo&#40;&#41;
&#123;
	alert&#40;bar&#41;;
	bar++;
&#125;

//-->
</script>

</head>
<body>

<form name="myfrm" method="post">
<input type="text" onblur="foo&#40;&#41;;" onkeypress="foo&#40;&#41;">
</form>

</body>
</html>
Δοκιμάστε να εκτελέσετε αυτό τον κώδικα! Όταν εμφανιστεί η σελίδα, πατήστε με το mouse στο text-field και μετά πατήστε το πλήκτρο TAB.

Στον Internet Explorer θα εμφανίσει ένα alert με τον αριθμό 0.

Στον Firefox όμως, θα εμφανίσει 3 alerts. Με τα μηνύματα: 0,0,2 αντίστοιχα σε κάθε alert. Γιατί;;;;;

Γνωρίζει κανείς για ποιο λόγο γίνετε αυτό και πως θα το κάνω να εκτελείτε μόνο 1 φορά!?? Μου έχει σπάσει τα νεύρα! :doh: :x :wink:

Για να γίνω λίγο πιο σαφής, να πω οτι θέλω όταν πατάω το TAB να εκτελείτε το onkeypress event και ΟΧΙ το onblur.

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

2 events ταυτόχρονα

Δημοσίευση από skeftomilos » 31 Ιούλ 2005 08:44

Αν το δοκιμάσεις με τον Opera θα σου βγάλει μηνύματα 0,1! Λοιπόν, ας προσπαθήσουμε να τα ξεμπλέξουμε. Ο Firefox βγάζει μηνύματα 0,0,2 γιατί:

1) Το πάτημα του TAB προκαλεί το συμβάν onkeypress.
2) Τρέχει η ρουτίνα foo() και εκτελείται η εντολή alert().
3) Όμως η εντολή αυτή προκαλεί την εμφάνιση μηνύματος, επομένως (σύμφωνα με τον Firefox) το στοιχείο input χάνει το focus!!!
4) Άρα συμβαίνει onblur και εκτελείται ξανά για δεύτερη φορά η ρουτίνα foo(), πριν ολοκληρωθεί η εκτέλεση της πρώτης. Το μήνυμα είναι 0.
5) Προτού τελειώσει η δεύτερη εκτέλεση συνεχίζει η πρώτη και εμφανίζει δεύτερο μήνυμα πάλι 0!
6) Τερματίζουν και οι δύο, και το στοιχείο input ξαναπαίρνει το focus.
7) Τώρα το στοιχείο πρέπει να χάσει το focus (γιατί πατήθηκε TAB) και συμβαίνει το onblur για μια ακόμα φορά, με μήνυμα 2.

Με λίγα λόγια, το alert που έβαλες για να ξεμπερδέψεις το ζήτημα, το μπέρδεψε ακόμα περισσότερο. :P

Παρακάτω γράφω μία εκδοχή χωρίς alerts. Αν μου επιτρέπεις διαχώρισα και την HTML από τη JavaScript, όπως είναι της μόδας τελευταία. Τα συμβάντα onblur και onkeypress παγιδεύονται όταν ολοκληρωθεί το φόρτωμα της σελίδας, δηλαδή στο συμβάν window.onload. Στο συμβάν onkeypress γίνεται έλεγχος για το keyCode, και αν είναι 9 (TAB) δε συμβαίνει τίποτα. Δουλεύει σε IE, Firefox, Opera.

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

<html>
  <head>
    <script type="text/javascript">
      window.onload = function&#40;&#41; &#123;
        document.forms.medieval.romance.onblur = function&#40;&#41; &#123;
          this.value += ' blur!'
        &#125;
        document.forms.medieval.romance.onkeypress = function&#40;e&#41; &#123;
          if &#40;!e&#41; e = window.event // Για τον IE.
          if &#40;e.keyCode != 9&#41; &#123;
            this.value = this.value.toUpperCase&#40;&#41;
          &#125;
        &#125;
      &#125;
    </script>
  </head>
  <body>
    <h2>gapostolis-events</h2>
    <form name="medieval">
      <input name="romance">
      <input name="intrigue">
    </form>
  </body>
</html>
Επίσης έχε υπόψη και το συμβάν onkeyup. Καμιά φορά είναι προτιμότερο από το onkeypress.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

gapostolis
Δημοσιεύσεις: 4
Εγγραφή: 30 Ιούλ 2005 02:06

2 events ταυτόχρονα

Δημοσίευση από gapostolis » 31 Ιούλ 2005 19:57

Σε ευχαριστώ πολύ skeftomile για την απάντηση σου! Σίγουρα μου ξεκαθάρισες τι γίνετε με τα events κατά τον Firefox.

Εγώ όμως έχω ακόμα πρόβλημα, γιατί στην συνάρτηση function() πρέπει να υπάρχει ένα alert. Που σημαίνει οτι το onblur θα παγιδεύεται συνεχώς.

Με άλλα λόγια, θέλω :

1) το onblur και το οnkeypress να καλούν την ίδια συνάρτηση function η οποία θα περιέχει ένα alert.

2) Όταν παγιδεύεται το Onkeypress να μην παγιδεύεται και το Onblur λόγω του alert που βρίσκεται στην function που κλήθηκε από την Onkeypress.

Για δες αυτό:
<html>
<head>
<script type="text/javascript">
window.onload = function() {
document.forms.medieval.romance.onblur = function() {
this.value += ' blur!'
}
document.forms.medieval.romance.onkeypress = function(e) {
if (!e) e = window.event // Για τον IE.
if (e.keyCode == 9) {
alert("tsa");
}
}
}
</script>
</head>
<body>
<h2>gapostolis-events</h2>
<form name="medieval">
<input name="romance">
<input name="intrigue">
</form>
</body>
</html>
Όταν θα πατήσεις ΤΑΒ θα εμφανιστεί στο text-field 2 φορές το μήνυμα "blur!". Πως θα γίνει να σταματήσουμε την εκτέλεση του onblur μέσα από την Onkeypress? Εχω βρει κάποιες συναρτήσεις όπως removeEventListener, cancelBubble, stopPropagation αλλά δεν έχω καταφέρει ακόμα να την δουλέψω σωστά για την περίπτωσή μου!

Σε ευχαριστώ για μία ακόμα φορά

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

2 events ταυτόχρονα

Δημοσίευση από skeftomilos » 01 Αύγ 2005 13:53

Μία λύση είναι η εξής:

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

<html>
  <head>
    <script type="text/javascript">
      window.onload = function&#40;&#41; &#123;
        var block_events = false

        document.forms.medieval.romance.onkeypress = document.forms.medieval.romance.onblur = function&#40;e&#41; &#123;
          if &#40;block_events&#41; return
          block_events = true
          if &#40;!e&#41; e = window.event // Για τον IE.
          if &#40;e.keyCode != 9&#41; &#123;
            alert&#40;'tsa!'&#41;
          &#125;
          block_events = false
        &#125;
      &#125;
    </script>
  </head>
  <body>
    <h2>gapostolis-events</h2>
    <form name="medieval">
      <input name="romance">
      <input name="intrigue">
    </form>
  </body>
</html>
Δηλώνουμε μία global μεταβλητή block_events η οποία γενικά είναι false αλλά γίνεται true όταν τρέχει κάποιο event. Στην αρχή του event ελέγουμε τη μεταβλητή και αν είναι true σημαίνει ότι κάποιο άλλο event τρέχει ταυτόχρονα οπότε βγαίνουμε.

Υ.Γ. function() δεν είναι το όνομα της συνάρτησης. Η συνάρτηση είναι ανώνυμη, επίτηδες για να μη μολύνει το global namespace. Στη JavaScript οι συναρτήσεις είναι αντικείμενα. Βασικά τα πάντα στη JavaScript είναι αντικείμενα, και οι συναρτήσεις δεν αποτελούν εξαίρεση. Στη συγκεκριμένη περίπτωση δημιουργούμε μία ανώνυμη συνάρτηση και την αποθηκεύουμε στις ιδιότητες onkeypress και onblur ενός DOM element.
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

gapostolis
Δημοσιεύσεις: 4
Εγγραφή: 30 Ιούλ 2005 02:06

2 events ταυτόχρονα

Δημοσίευση από gapostolis » 02 Αύγ 2005 03:39

Χίλια ευχαριστώ skeftomile! Χάρη στην βοήθειά σου το κατάφερα να δουλέψει όπως ακριβώς το ήθελα! :)

Μία ακόμα ερώτηση, άσχετη όμως με τα events.

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

foo&#40;id&#41;
&#123;
cust_select_number = 'cust_select_'+id;
cust_input_number = 'cust_input_'+id;
var old_val = form&#91;cust_input_number&#93;.value;
var t_msg = 'Δεν ο κωδικός&#58; '+old_val;
alert&#40;t_msg&#41;;

if &#40;form&#91;cust_select_number&#93;.value!='none'&#41;
	form&#91;cust_input_number&#93;.value=form&#91;cust_select_number&#93;.value;
else
		form&#91;cust_input_number&#93;.value= '';
&#125;
Ο Firefox, έχει στα εργαλεία του, μία κονσόλα Javascript. Στην κονσόλα αυτή μου χτυπάει μήνυμα λάθους στο alert:

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

alert&#40;t_msg&#41;;
καθώς και στο τελευταίο assignment:

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

form&#91;cust_input_number&#93;.value= '';
Παρόλα αυτά εκτελεί κανονικά και τις 2 εντολές. Γιατί μπορεί να γίνετε αυτό; Έχω κάποιο λάθος στον κώδικα και δεν το βλέπω;

PS: Σε περίπτωση που το χρειαστείτε, το select είναι κάπως έτσι:

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

<select name='cust_select_3'>
<option value="none">Επιλέξτε...</option>
<option value="3">Ανδρεας</option>

<option value="1">Αλέξανδρος</option>
<option value="2">Γιάννης</option>
</select>
Και πάλι ευχαριστώ εκ των προτέρων :wink:

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

2 events ταυτόχρονα

Δημοσίευση από skeftomilos » 03 Αύγ 2005 02:37

gapostolis έγραψε:Ο Firefox, έχει στα εργαλεία του, μία κονσόλα Javascript. Στην κονσόλα αυτή μου χτυπάει μήνυμα λάθους στο alert
Εννοείς βγάζει σφάλμα ή warning; Τα σφάλματα προκαλούν διακοπή της εκτέλεσης του script αντίθετα με τα warnings. Πάντως καλό είναι να απαλλαγείς και από τα warnings αν σου βγάζει. Στον κώδικα που δίνεις έχεις μία μεταβλητή με όνομα form, η οποία δε βλέπω να ορίζεται κάπου. Αν κατάλαβα καλά ο σκοπός της ρουτίνα foo() είναι να μεταφέρει την επιλεγμένη τιμή του select σε ένα text field;

Σχετικά με το προηγούμενο script, τώρα που το ξανασκέφτομαι μου κάνει εντύπωση το alert στο keypress. Δεν είναι αυτό ενοχλητικό για το χρήστη; :-?
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

gapostolis
Δημοσιεύσεις: 4
Εγγραφή: 30 Ιούλ 2005 02:06

2 events ταυτόχρονα

Δημοσίευση από gapostolis » 06 Αύγ 2005 05:37

Όχι δεν βγάζει warning. Αυτό είναι το περίεργο της υπόθεσης. Βγάζει σφάλμα και παρόλα αυτά εκτελεί κανονικά τον κώδικα.

Αν έχεις Firefox εκτέλεσε αυτόν το κώδικα και θα καταλάβεις τι εννοώ.

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

<html>
<head>
<script type="text/javascript">
function foo&#40;form, evt&#41;
&#123;
    evt = &#40;evt&#41; ? evt &#58; &#40;&#40;window.event&#41; ? event &#58; null&#41;;

    var charCode = &#40;evt.charCode&#41; ? evt.charCode &#58; &#40;&#40;evt.which&#41; ? evt.which &#58; evt.keyCode&#41;;

    if &#40;charCode==13&#41;
	form.field3.focus&#40;&#41;;
&#125;
</script>

</head>
<bodY>

<form name="myform">
<input type="text" name="field1" onkeypress="foo&#40;this.form, event&#41;" ><br/>
<input type="text" name="field2"><br/>
<input type="text" name="field3"><br/>
</form>

</body>
</html>
Αν είσαι στο field1 και πατήσεις ENTER θα πρέπει το focus να παει στο field3.

Το περίεργο είναι οτι το focus θα πάει στο field3 κανονικά, μόνο που στο javascript console θα χτυπήσει σφάλμα στην εντολή:

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

form.field3.focus&#40;&#41;;
Είναι παράλογο και παρανοικό!

Εσύ τι γνώμη έχεις;;

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

2 events ταυτόχρονα

Δημοσίευση από skeftomilos » 06 Αύγ 2005 09:19

Πολύ περίεργο ... δεν έχω ιδέα τι συμβαίνει ... μυρίζει bug. Δοκίμασα να αναβάλλω το focus με setTimeout αλλά πάλι έβγαλε exception. Βγαίνει μόνο από συμβάντα key, όχι από click κ.λπ. Αφού δουλεύει προτείνω απλά να κάνεις exception handling και να μη χάνεις άλλο το χρόνο σου. :roll:

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

try &#123;
  if &#40;charCode==13&#41; form.field3.focus&#40;&#41;
&#125; catch&#40;e&#41; &#123;&#125;
The pure and simple truth is rarely pure and never simple. Ο μη νους δε σκέπτεται μη σκέψεις για το τίποτα.

Απάντηση

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

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

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