Event.Target not working in Firefox -- when fixed not working in Chrome

Question

I am having the common issue in Firefox where event.target is undefined if you don't pass it in as an argument.

See these for reference:

jQuery event.target not working in firefox and IE?

javascript event.target not working in mozilla

I am trying to get the checkbox that was checked inside a select list to determine what action to take.

My select list has the id of #itemCategories

According to the chrome debugger, and IE, before adding event it gets the correct element.

But after adding the event parameter event.target becomes the select list and not the selected item.

So the question comes down to what is the correct code for grabbing the selected element in a select list across all three major browsers (Chrome/IE/Firefox)

Maybe the original event will have the target you're looking for `event.originalEvent.target`. Or `event.currentTarget` might be what you're looking for. — Musa, Jul 11 '16 at 15:10
If you watch the change event of a select, the event.target will get you the select object (what you call a list). What is the HTML corresponding to your #itemCategories ? — nicolallias, Jul 11 '16 at 15:10
`event.currentTarget` is the same as `event.target` when event is defined. `event.originalEvent` is undefined — Mike, Jul 11 '16 at 15:18
Hi Mike, I've dealt a lot with check boxes and events. My suggestion to you is to `.addClass()` `.on()` click and create your own argument behavior check. Or, you add a layer on top of the entire list dynamically, and then "persist the click" only if the mouse if over the intended target. — Alexander Dixon, Jul 11 '16 at 15:20

Alexander Dixon · Answer 1 · 2016-07-11T17:15:12.700

jQuery's .addClass() method has a callback which you can tap into. If you combine it with jQuery psuedo selectors method you can target what was selected and it should be compatible across all browsers. When different browsers behave differently with HTML elements, it is wisest to always use super specific DOM targeting that is normalized via jQuery.

Documentation:

.not() method

.addClass() method

.removeClass() method

:selected method

//http://stackoverflow.com/a/5754149/5076162
//http://stackoverflow.com/a/22648443/5076162
$('select').on("change", function() {
  $('select option:selected').addClass(function() {
    var isSelected = "isSelected";
    return isSelected;
  });
  var notSelected = $('select option').not($('select option:selected'));
  notSelected.removeClass('isSelected');
});

select *.isSelected,
select *.isSelected {
  color: #ACE;
  background-color: #F00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select id="optionTest">
  <option value="volvo">Pick your car</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
<div>

</div>

//http://stackoverflow.com/a/5754149/5076162
$('select').on("change", function() {
  $('select option:selected').addClass(function() {
    var isSelected = "isSelected";
        return isSelected;
  });
    var notSelected = $('select option').not($('select option:selected'));
    notSelected.removeClass('isSelected');
});

Event.Target not working in Firefox -- when fixed not working in Chrome

1 Answers1