Comments (8)
Apologies for this.
Not your fault — mine for closing this issue prematurely.
Anyway, I’ll take this opportunity to tell you that I think the work you’ve been doing on issue triage and technical review of issues has been immensely helpful for the project — including the attention you’ve paid to getting some longstanding (and in some cases long-neglected…) issues the attention they’ve needed
from content.
Apologies for this. Thanks for your time and feedback on this issue.
from content.
@SetTrend Very helpful bug report! Thank you!
from content.
whereas with focus and blur events, the relatedTarget property is always null.
The following code sample shows that this is not true, at least not now:-
<!DOCTYPE html>
<html lang="en-US" charset="utf-8">
<head>
</head>
<body>
<form id="form">
<input type="text" placeholder="text input">
<input type="password" placeholder="password">
</form>
</body>
<script type="text/javascript">
const form = document.querySelector('input[type="password"]');
form.addEventListener('focus', (event) => {
event.target.style.background = 'pink';
console.log('focus: ' + String(event.relatedTarget));
});
form.addEventListener('focusin', (event) => {
event.target.style.background = '';
console.log('focusin: ' + String(event.relatedTarget));
});
form.addEventListener('blur', (event) => {
event.target.style.background = '';
console.log('blur: ' + String(event.relatedTarget));
});
form.addEventListener('focusout', (event) => {
event.target.style.background = '';
console.log('focusout: ' + String(event.relatedTarget));
});
</script>
</html>
focus: [object HTMLInputElement] test.html:16:17
focusin: [object HTMLInputElement] test.html:21:17
blur: [object HTMLInputElement] test.html:26:17
focusout: [object HTMLInputElement] test.html:31:17
The only difference between those events as per the W3C documentation is in
- whether the event bubbles. This is noted in the MDN docs.
- the timing of event dispatch (before shifting in focusin/focusout, after in others). This is not noted in the MDN docs.
relatedTarget
could be null in any of them in nested browsing contexts as that is a property of the FocusEvent interface.
What fixes, if any, should be made for this issue?
from content.
Closing for lack of response
from content.
Not so fast!
There are people out here who are working on business projects for their living, not having time to reply to you immediately just because you are having a slice of free spare time available.
You cannot come back to a ole thread after two years of idleness and expect to get a response immediately.
Please re-open.
from content.
So true.
I, on my part, will make sure to get back on this issue til end of the month.
from content.
I now tested the new behaviour of blur
and focus
events, as @himanshugarg suggested. Thank you for bringing this issue back up again with your very valuable information, @himanshugarg!
The behaviour of these events in regards to relatedTarget
indeed has changed over time. They now both return the counterpart element, if applicable.
So, it seems like there is no difference anymore between blur
/focusout
and focus
/focusin
, respective.
Considering thorough documentation on these events:
When is focusin
supposed to be preferred over focus
? When is focusout
supposed to be preferred over blur
? Or has one of these pairs become redundant now, since both mirror each other?
from content.
Related Issues (20)
- Ensuring ordering on conditional use of promises: Example is fundamentally flawed
- [CSS] `calc()` can parse color components
- Create "Cumulative Layout Shift" glossary page HOT 2
- content Error HOT 2
- [Web API] HTML character entities are supported in WebVTT
- [CSS] Support alt text in the `content` property
- inset() shape function missing information
- [Security] Upgrade passive mixed content to HTTPS
- Limitations of `path()` basic shape
- Dead Link
- Internet Explorer is outdated, need to change the content
- MDN inert Attribute Docs: Missing Info on Text Selection Prevention
- Crashes on iOS Safari HOT 1
- Add a glossary entry for "federated identity provider"
- Unclear whether omitting `<tbody>` tags (putting `<tr>` directly under `<table>`) is valid
- Define a `packageManager` field in `package.json`
- CSS pointer-events description is inaccurate
- Examples don't work HOT 2
- Broken link to browser compatability section in API landing pages HOT 1
- minimalDays could use more explanation HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from content.