如何防止JavaScript中的事件传播？

Question

<script type="text/javascript">
function f1(a)
{
alert(a);
document.forms[0].elements[0].focus();
}
function f2(b)
{
alert(b);
document.forms[0].elements[1].focus();
}
</script>
<form name="myform">
<input type="text" name="box1" value="a" onblur=f1('a');  />
<input type="text" name="box2" value="b" onblur=f2('b');  />
</form>

The onblur event is fired every time and looping indefinitely.tried e.stopPropagation() still the same. My purpose is to validate the textboxes when the user navigates to next form element.so this made me to call the function in onblur()

Answer 1

When an alert popup is opened, and you having to click on it causes the field that you were on the blur once again, which in turn makes another call to one of your functions (f1 or f2), and another alert popup appears. Thus it is an endless cycle. stopPropagation will not help you here. Suggestion: don't use alert() .

Now let's assume you didn't call alert() . You are still going to have a major usability problem here. After the user initially focuses on either of the text fields, they will never be able to enter the other text field, or any other input element, for that matter, because the initial field will continually require focus.

Answer 2

You could try and troubleshoot this or just leverage an industry proven package, example: jQuery. It helps you handle all kinds of event propagation and provides nice examples.