Good alternative for deprecated "event.preventDefault()" for inline javascript code

Question

<button type="submit" class="button-danger" onclick="if(!window.confirm('aaa'))event.preventDefault();">aaa</button>

This is my original code. PHPStorm is showing that event global variable is deprecated.

I do not want to make a separate function to do what I want but I just want this inline version built into the "onclick" attribute of the button.

Alternative that uses JQuery correctly will be better. Any advice will be appreciated.

EDIT: the linked question has answers that make a separate function. I want an INLINE version that is built into the onclick. I don't want to make my code long.

The linked question makes a SEPARATE FUNCTION. I want an inline version. — cr001, Jun 23 '22 at 02:39
doesn't returning false in so-called inline code have the same effect? by the way, how is event.preventDefault "deprecated"? — Bravo, Jun 23 '22 at 02:41
For modern JavaScript, I think most should consider inline handlers to be essentially deprecated too, they have way too many problems to be worth using. @Bravo The reference to `window.event` is what's deprecated — CertainPerformance, Jun 23 '22 at 02:42
@Bravo If there is a way to convert a function call to inline code it's fine too. I just want to keep the code short. I tried onclick="function(e){e.preventDefault()}" but did not work — cr001, Jun 23 '22 at 02:44
why would you try that? nobody suggested it - I don't understand why you want your code in html attributes - seems very old school way of doing things — Bravo, Jun 23 '22 at 02:44
I tried that prior to asking this question and many other things. That's why I am asking this question since I don't know how. — cr001, Jun 23 '22 at 02:45
@CertainPerformance My goal is to align with the PHPStorm default code-style specification while making my code shorter. At least inline codes are not shown as warning in PHPStorm. — cr001, Jun 23 '22 at 02:46
I would say whether inline function itself if old-school would be opinion-based as I have seen many people doing it and it's not shown as warning in PHPStorm. I would appreciate if anyone can answer my original question. — cr001, Jun 23 '22 at 02:49
If PHPStorm really does recommend that you use inline handlers... if it were me, that'd be a good reason to switch to something else that follows better practices — CertainPerformance, Jun 23 '22 at 02:50
Inline event handlers are bad practice. If you insist on using them anyway, you may as well continue using the also-bad-practice global `event` too, and turn off that warning in your IDE; the former is considerably worse than the latter. (Although in the specific case of `preventDefault`, consider `return false`, which doesn’t do exactly the same thing but will probably work in your case. `onclick="return confirm('aaa')"`) — Ry-, Jun 23 '22 at 02:55
Is there any official statement and/or editor specifications that says inline handlers are bad practice? — cr001, Jun 23 '22 at 02:56
And the return one actually works, thanks for your answer finally. — cr001, Jun 23 '22 at 02:58
CertainPerformance’s answer has a link with justifications. One major one that isn’t even listed there is that they prevent you from using a secure Content-Security-Policy to defend against script injection (XSS). Not sure what constitutes an “editor specification”. Big companies follow bad practices all the time. (Note that “inline” event properties that are compiled to something else, e.g. React + JSX, are different.) — Ry-, Jun 23 '22 at 03:00
The answer did not show up for some reason. Thanks for your explanation anyway. That's actually some legit reason, I was thinking just about code cleanness for meaning of "bad practice" — cr001, Jun 23 '22 at 03:04

score 3 · Accepted Answer · answered Jun 23 '22 at 02:48

To start with, you really shouldn't use inline handlers if you want to be writing decent maintainable modern JavaScript. They have a plethora of problems including usually only being able to reference global identifiers (such as window.event). I'd strongly recommend attaching the event handler properly using JavaScript.

$('button').on('click', (e) => {
  if (!window.confirm('aaa')) {
    e.preventDefault();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <button type="submit" class="button-danger">aaa</button>
</form>

If that's really not an option for you, it's just barely possible to do what you want by referencing the arguments for the inline handler. The first argument will be the event, so arguments[0].preventDefault() will do what you want.

<form>
  <button type="submit" class="button-danger" onclick="if(!window.confirm('aaa')) arguments[0].preventDefault();">aaa</button>
</form>

Good alternative for deprecated "event.preventDefault()" for inline javascript code

1 Answers1

Linked