cancel
Showing results for 
Search instead for 
Did you mean: 

tutorial events handler in firefox differences with chrome and IE

SOLVED
Highlighted
New User

tutorial events handler in firefox differences with chrome and IE

I have this code:

           var inp1 = document.createElement("input");
           inp1.type = "button";
           inp1.value = "  Delete  ";
           var bott = "boton" + i.toString();
           inp1.id = "prueba" + i;
           inp1.className = "boton";
           inp1.onclick = function() {deleteItem(event)};

function deleteItem(event) {

   var tname = event.srcElement || event.target;
   var tname1 = tname.id;

.... .... ... works for chrome but not firefox

1 ACCEPTED SOLUTION

Accepted Solutions
Mozilla Support Contributor

Re: tutorial events handler in firefox differences with chrome and IE

Thank you for clarifying that, I was a little confused.

Here are a couple of sites that I think are really useful for learning JavaScript:

(1) Mozilla Developer Network - mdn

If you search for anything (e.g., addEventListener) and add mdn to your query, Google usually will give you the relevant page near the top of your results. Or you can skim the index pages here:

(2) QuirksMode

Not completely up-to-date, but great for finding information on browser differences and related workarounds. http://www.quirksmode.org/compatibility.html

7 REPLIES
Mozilla Support Contributor

Re: tutorial events handler in firefox differences with chrome and IE

The event is passed to the outer function which in this case is the anonymous function. If you want to pass the event to another function, you need to define the variable name as the parameter to the anonymous function. For example:

inp1.onclick = function(event) {deleteItem(event)};

Does that work in all of your target browsers?

New User

Re: tutorial events handler in firefox differences with chrome and IE

Finally, here is the code:

           inp1.className = "boton";
           if(navigator.appName=="Microsoft Internet Explorer"){
               inp1.onclick = function() {deleteItem(event)};
           } else {inp1.onclick = function() {deleteItem(this)};}

function deleteItem(event) {

   if(navigator.appName=="Microsoft Internet Explorer") {
     var tname = event.srcElement || event.target;
     var tname1 = tname.id;   
   } else {var tname1 = event.id;}
Mozilla Support Contributor

Re: tutorial events handler in firefox differences with chrome and IE

What kind of tutorial are you writing?

Generally speaking, you should never recommend detecting browser capabilities by strings in the navigator properties. It is always better to use object/property/method detection if possible. Otherwise, you may miss crucial changes made in more recent versions of a browser, such as IE9 and later. Also, you should consider using the standardized approach to defining event handlers, which is addEventListener().

Here is an alternative example:

var inp1 = document.createElement("input");
inp1.type = "button";
inp1.value = "  Delete  ";
inp1.id = "prueba" + i;
// For best results, add element to the document before
// setting event listeners
if (inp1.addEventListener) 
  inp1.addEventListener("click", deleteItem, false);
else
  inp1.onclick = deleteItem;
function deleteItem(evt){
  if (!evt) evt = window.event; // old IE
  var tgt = evt.target || evt.srcElement;
  alert(tgt.id); //for debug/test only
  return false; //for debug/test only
  ...
Mozilla Support Contributor

Re: tutorial events handler in firefox differences with chrome and IE

By the way, this was my test page for the suggested new bits:

<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<body>
<p><button id="clicktest">Click me!</button></p>
<script type="text/javascript">
var btn = document.getElementById("clicktest");
if (btn.addEventListener) 
 btn.addEventListener("click", deleteItem, false);
else
 btn.onclick = deleteItem;
function deleteItem(evt){
 if (!evt) evt = window.event; // old IE
 var tgt = evt.target || evt.srcElement;
 alert(tgt.id);
 return false;
}
</script>
</body>
</html>
New User

Re: tutorial events handler in firefox differences with chrome and IE

Hello jscher2000, thank you for your answers, I really appreciate them very much. I am new with javascript, ajax and dynamic html. By the way, I am not ready to write a tutorial, I am looking for a tutorial to learn more.

Mozilla Support Contributor

Re: tutorial events handler in firefox differences with chrome and IE

Thank you for clarifying that, I was a little confused.

Here are a couple of sites that I think are really useful for learning JavaScript:

(1) Mozilla Developer Network - mdn

If you search for anything (e.g., addEventListener) and add mdn to your query, Google usually will give you the relevant page near the top of your results. Or you can skim the index pages here:

(2) QuirksMode

Not completely up-to-date, but great for finding information on browser differences and related workarounds. http://www.quirksmode.org/compatibility.html

New User

Re: tutorial events handler in firefox differences with chrome and IE

Wonderful! Have a great day!