Firefox中event未定义问题：Chrome正常Firefox报TypeError: e is undefined

这个问题我之前也碰到过，本质是不同浏览器对全局事件对象的支持差异导致的，我来拆解一下原因和解决办法：

问题根源 #

1. 先看你的HTML调用：<div onclick='filter(1)'>Testing</div>，这里调用filter函数时只传了第一个参数id=1，完全没传递事件对象e。
2. 你的函数里写了if (!e) e = window.event;——这行代码在Chrome（以及IE系浏览器）里能工作，是因为这些浏览器支持全局的window.event对象，当e是undefined时，会自动把全局事件对象赋值给e。
3. 但Firefox并不支持window.event这个全局属性，所以当e是undefined时，e = window.event这一步之后e依然是undefined，后面代码里用到e.target自然就会抛出TypeError了。

解决办法 #

办法1：手动传递事件对象到函数里 #

直接修改HTML的内联点击事件，把浏览器提供的event对象传进去：

<div onclick='filter(1, event)'>Testing</div>

这样不管是Chrome还是Firefox，filter函数都能拿到正确的事件对象e，后续代码就能正常执行。

办法2：改用jQuery的事件绑定（更推荐） #

内联onclick其实不是最佳实践，用jQuery的事件绑定可以自动处理跨浏览器的事件对象问题，代码也更清晰：

1. 先修改HTML，去掉内联onclick，给元素加标识：

<div class="filter-item" data-id="1">Testing</div>

2. 然后用jQuery绑定点击事件：

$('.filter-item').on('click', function(e) {
  const id = $(this).data('id'); // 获取data-id里的1
  $(e.target).closest('.item').addClass('hidden');
  // 你的其他逻辑...
});

这种方式下，jQuery会自动把标准化的事件对象传递到回调函数里，完全不用操心跨浏览器的差异问题。

内容的提问来源于stack exchange，提问作者Murasaki Aikon