The functionality of window.event.target appears to be malfunctioning in the Firefox browser

I have been working on an angularjs application. We have implemented a functionality to display alerts for unsaved changes using 

window.event.target. Everything was functioning correctly in all browsers except for <code>Firefox
. The error message we encountered was 'window.event is undefined'. Have you ever experienced this issue? Any suggestions on how to resolve it would be greatly appreciated. Please assist us.

 <!DOCTYPE html>
    <html>

    <body>
      <input value="click" type="button" onclick="call()" />
      <script>
        function call() {
          var targ;
          if (!e) var e = window.event;
          if (e.target) targ = e.target;
          else if (e.srcElement) targ = e.srcElement;
          if (targ.nodeType == 3) // workaround for Safari bug
            targ = targ.parentNode;
        }
      </script>
    </body>

    </html>
javascriptangularjsfirefox

Answer №1

Firefox requires the event parameter to be defined, unlike Chrome.

<!DOCTYPE html>
<html>

  <body>
    <input value="click" type="button" onclick="grabId(event)" />
    <script>
      function grabId(event) {
        var targ;
        if (!e) var e = event;
        if (e.target) targ = e.target;
        else if (e.srcElement) targ = e.srcElement;
        if (targ.nodeType == 3) // defeat Safari bug
          targ = targ.parentNode;
      }
    </script>
  </body>

</html>

Answer №2

Here is an example that demonstrates how to make it work by passing the event to the function itself:

<!DOCTYPE html>
<html>

<body>
   <script>
    function handleClick(e) {
      var targetElement;
      if (e.target) targetElement = e.target;
      else if (e.srcElement) targetElement = e.srcElement;
      if (targetElement.nodeType == 3) // fixing Safari bug
        targetElement = targetElement.parentNode;
    }
  </script>
  <input value="click" type="button" onclick="handleClick(event)" />

</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason for jquery requiring _$ when overwriting?

var // Optimizing references to window and allowing renaming window = this, // Increasing efficiency in referencing undefined and enabling renaming undefined, // Creating aliases in case of jQuery overwrite _jQuery = window.jQuery, // Creating aliases in ...

javascriptjquery

AngularJS - Utilizing Nested ng-repeats

I'm attempting to iterate through a given JSONObject that contains JSONArray and display it in an HTML format. Here's a sample of what I have: jsonData: { "category1": [ { "name": "Some title", "desc": "And i ...

angularjsnestedangularjs-ng-repeat

Tips for converting a raw SQL query to Knex syntax

Recently delving into the world of development, I've come across knex for the first time. Issue: I have a raw SQL query that is functioning correctly. Now, I'm attempting to utilize knex for this query. To better understand how things operate, I ...

javascriptpostgresqlnext.jsknex.js

When working with NodeJS, Express, and MySQL, it is important to avoid setting headers after they have already been sent

I am working on a NodeJS application using Express and here is the relevant code snippet. app.post('/open', checkStatus, function(req, res) { if (req.error) { console.log(req.log); return res.json(req.error); } console.log(current ...

javascriptmysqlnode.jsexpress

The issue of infinite scroll functionality not functioning properly when using both Will Paginate and Masonry

I'm having trouble getting the Infinite Scroll feature to work on my website. I've successfully implemented Masonry and Will Paginate, but for some reason, the Infinite Scroll isn't functioning as expected. I suspect that the issue lies wit ...

javascriptjquerywill-paginatejquery-masonryinfinite-scroll

reveal the concealed divs within the list elements

html: In my HTML document, I have a unordered list (ul) with each list item (li) constructed like this: <li class="A">list-item <div>1</div> <div class="B">2 <div class="C">3</div> </div> ...

javascriptjquery

Error occurs in console when using .getJSON with undefined JSON, but does not happen when using embedded data

Can someone help me understand why I'm getting an 'undefined' response when I use console.log(tooltipValues), but there's no issue with console.log(tooltipJSON). I've noticed that when I embed the data directly in my JS code, ever ...

javascriptjson

Applying specific style properties in styled-components can vary based on certain conditions

Is it possible to apply multiple properties at once? const Button = styled.div` color: blue; opacity: 0.6; background-color: #ccc; ` I want to apply styles for the active state without having to specify conditions for each property individually. Ho ...

javascriptcssreactjsstyled-components

The ng-model is failing to identify the value and is remaining undefined

Having trouble passing a variable from an <input> to a function using ng-model within the input. The variable remains undefined no matter what I try. The input field is located inside a <td> and has the following structure: <td> ...

angularjs

Making React function properly on GitHub Pages

I have followed all the steps and even consulted multiple tutorials that all say the same thing, but when I try to run "npm run deploy" I encounter an error and nothing happens. This is the error message: [email protected] deploy A:\Documents&bs ...

javascriptnode.jsreactjsnpmgithub-pages

Passing a complex variable type in TypeScript to a function without the need to redefine the type

I'm fairly new to working with TypeScript and I've encountered this issue several times. When using tools like Prisma to retrieve data, I often come across values with incredibly complex types. These values contain many attributes, which is perf ...

javascripttypescriptprisma

Guidelines for accessing a specific object or index from a dropdown list filled with objects stored in an array

Here is a question for beginners. Please be kind. I have created a select field in an HTML component using Angular, populated from an array of objects. My goal is to retrieve the selection using a method. However, I am facing an issue where I cannot use ...

javascripthtmlangular

Sort the elements in the array by a specific value using the orderBy

Within my code, I am utilizing nested ng-repeat to retrieve data from the server: <div ng-repeat="x in result | filter:sellbox " > <div ng-repeat="z in x.data | orderBy:'??' " > {{x.rate_type}} to {{x.nam ...

angularjsangularjs-ng-repeatangularjs-orderby

Error: Angular router outlet could not find any matching routes for the requested

I have been working on an application that utilizes lazy-loaded modules for each main section of the app. In one module, I have two router outlets - a primary one and one called details. const routes: Routes = [ { path: '', component: BooksCo ...

javascriptangularangular-routing

changing the elements' classes by using a carousel

Having trouble with a custom carousel and unable to use the standard Bootstrap carousel. This is how my code is structured: Images: <img src="1.img"/> <img src="2.img"/> <img src="3.img"/> Prev / Next buttons: <div class="left ...

javascriptjqueryhtmlcss

Sending a path containing '/' to either the $resource or $http factory

Is there a way to send a parameter containing / to the Factory? Trying to achieve something like this: .factory('MyData', ['$resource', function ($resource) { return $resource('http://1.2.3.4/:urlFragment', { urlFragmen ...

angularjs

Using socket.io-client in Angular 4: A Step-by-Step Guide

I am attempting to establish a connection between my server side, which is PHP Laravel with Echo WebSocket, and Angular 4. I have attempted to use both ng2-socket-io via npm and laravel-echo via npm, but unfortunately neither were successful. If anyone h ...

javascriptangulartypescriptsocket.iolaravel-echo

tips for effectively utilizing getters in array sorting operations

I've been encountering some issues with vuex getters. My objective is to arrange the cart data, which consists of an array of objects, by date using the getter named myCartItems. The problem I'm facing is that when I add a second payload {prod_ ...

javascriptvue.jsvuex

Adding associated documents into MongoDB from an Express application

My mongo db schema is structured as follows: users: {username:"", age: "", data: [ {field1:"", field2:""}, {field1:"", field2:""} ] } I am facing an issue with sending my user object to my express route for posting data to the database. ...

javascriptnode.jsmongodbexpressmongoskin

Tips for showcasing elements individually in JavaScript when a button is clicked and halting on a random element

I have some names stored in h3 tags. I want to highlight one name at a time when I click a button, stopping at a random name. <div class="all-names"> <h3 class="name-one"><span class="line">Name ...

javascripthtmlfunctioniterator