In JavaScript, the event.defaultPrevented property will never be set to true

Question

In JavaScript, the event.defaultPrevented property will never be set to true

I've been experimenting with events in my script, but I'm struggling to understand the functionality of event.preventDefault()/event.defaultPrevented:

var e = new Event('test');

e.defaultPrevented;
> false

e.preventDefault();

e.defaultPrevented;
> false

How can I set e.defaultPrevented to true? It's behaving consistently across Chrome, Firefox, and Edge, so I must be missing something.

Thank you :)

UPDATE : The problem was that I didn't define the Event with:

var e = new Event('test', {cancelable: true});

javascript dom-events

Answer 1

Answer №1

When utilized in this manner, it proves effective

document.querySelector("a").addEventListener("click", function(e) {
  console.log(e.defaultPrevented)
  e.preventDefault();
  console.log(e.defaultPrevented)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="test">Click</a>

There is a specific jQuery method for this action

$("a").on("click", function(e) {
  console.log(e.isDefaultPrevented())
  e.preventDefault();
  console.log(e.isDefaultPrevented())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="test">Click</a>

Answer 2

When utilized in this manner, it proves effective

document.querySelector("a").addEventListener("click", function(e) {
  console.log(e.defaultPrevented)
  e.preventDefault();
  console.log(e.defaultPrevented)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="test">Click</a>

There is a specific jQuery method for this action

$("a").on("click", function(e) {
  console.log(e.isDefaultPrevented())
  e.preventDefault();
  console.log(e.isDefaultPrevented())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="test">Click</a>

In JavaScript, the event.defaultPrevented property will never be set to true

Answer №1

Similar questions

How to retrieve a value from an Angular form control in an HTML file

Discrepancy in div height between Chrome/Edge and Firefox browsers

Manipulating binary data through the use of encodeURIComponent

How can you replicate a mouseover event using Selenium or JavaScript?

What is the best method for testing different versions of the same module simultaneously?

Having trouble interacting with Xpath elements using Selenium and Java?

Difficulty encountered while setting up jQuery slider

display a dual-column list using ngFor in Angular

What do I need to add in order to connect a controller to a form submission?

Using an element with the href property in conjunction with react-router: a comprehensive guide

How can JavaScript be used to create a unique signup and login process on

Modify the information on a page by clicking a button on a different page

React - the elusive nature of variable mutation

Is it feasible to create a doughnut chart with curved edges?

The addition of a cancel swipe feature to an HTML5 eBook is causing the text input field for note-taking to malfunction

What is the best way to trigger my web scraper within an express route?

Is it possible to invoke a JavaScript function from within a CSS file?

Tips for incorporating a custom CSS design into a jQueryUI tooltip

Having trouble with the "initSdk" property being undefined in your React Native Appsflyer integration?

Verify the presence of a JSON object in Postman