Comments (7)
#1567 (comment) has a suggested way to write this down a lot clearer. And then the outcome needs to meet these criteria:
- well-defined
- tested
- web compatible.
from html.
2. button that has a `popovertarget` * `<a href="#link"><button popovertarget="foo">click</button></a><article id="foo">article</article>` In Chrome but not in Firefox, clicking the button will activate the popover and follow the link. This corresponds to both the link and button being activation target. I'm unable to test on Safari.
I update the test a bit,
data:text/html,<a href="javascript:alert('link%20followed');"><button popovertarget=foo>click</button></a><div id=foo popover>popover</div>
Safari behaves the same as Chrome.
from html.
<input type=button>
has a similar issue,
Test with
data:text/html,<a id=link href="javascript:alert('link%20followed');"><input type=button value=click></a>
a's activate behavior is triggered.
And test with input type button with popovertarget
data:text/html,<a href="javascript:alert('link%20followed');"><input type=button value=click popovertarget=foo></a><div id=foo popover>popover</div>
Chrome and Safari triggers both a's activate behavior and the popover.
from html.
Another issue
data:text/html,<a href="javascript:alert('link')"><form action="javascript:alert('submit')"><input type=submit onclick="this.type='button'"></form></a>
According to the spec, the input element is activation target. But Firefox as well as Chrome trigger the link. Introducing a has-activation-behavior algorithm as described in #1567 (comment) probably would not mitigate this.
from html.
@vinhill It seems a simpler version of that would be data:text/html,<form%20action="javascript:alert('submit')"><input%20type=submit%20onclick="this.type='button'"></form>
. Something with activation behavior makes itself ineligible for activation behavior (and therefore we end up looking at the parent in the complicated case). But yeah, addressing that might require some heavier restructuring. And it's definitely broken in both its simple and complex forms today.
from html.
Both of my proposed solutions are probably not a good idea.
- Idea 1, introduce a has activation behavior algorithm. This would change the behavior of buttons changing their type on click in a way that is visible to the web.
- Idea 2, have buttons activate ancestor links. I think this is a bit ugly and more importantly, elements in the event chain between button and anchor cannot stop the navigation through preventing default.
I read the code from Blink and WebKit, maybe we can align the specification to their implementation through the following changes
- In dispatch,
activationTarget
becomeslegacyActivationTarget
and is only used for legacy-pre- and legacy-canceled-activation behavior - Introduce a new default handled flag for events
- After step 11, walk the event's path and invoke each element's activation behavior until the event is canceled or default handled
- The activation behavior algorithms are changed to set the default handled flag accordingly.
For comparison, here is the corresponding code for default handling the event in Blink and WebKit.
An open question for me is whether popover should cause the default handled flag to be set. It doesn't seem to be the case in Chromium (see here), but as stated above, I'm unsure if this is intended.
from html.
from html.
Related Issues (20)
- If a web author sets dropEffect to something that is not allowed according to spec, should UA respect their choice by updating dropEffect attribute?
- template.content has unusable value HOT 1
- Clean up HTML <-> DOM hooks HOT 2
- Consider improving interoperability of <iframe> throttling margins. HOT 10
- The dropEffect column in the Drag and Drop events summary table should clarify it represents default values.
- Drag and drop spec allows multiple values for dropEffect which might cause browsers to behave differently.
- How should UAs handle web authors setting dropEffect values?
- Proposal for event ordering when inserting replacement text such as text prediction, spell checker, etc
- It's unclear how shadows should be drawn across various compositing operators HOT 2
- Should custom validity error message treat \r as newline? HOT 3
- Upcoming WHATNOT meeting on 5/16/2024 HOT 5
- Date Picker popup doesn't propagate shadow DOM events into the light DOM HOT 1
- Clarify `detail` value of synthetic click event HOT 3
- Consider making "gamepadconnected" part of “activation triggering user event”? HOT 1
- Meeting 2 for joint OpenUI-WHATWG/HTML-CSSWG task force on styleable form controls HOT 4
- Upcoming WHATNOT meeting on 5/23/2024 HOT 6
- [Proposal]: Enable `HTMLElement` attributes to be toggled without JavaScript HOT 1
- Issue with Step 10 of inner navigate event firing algorithm HOT 2
- Provide native validation messages for native validity states on Form Associated Custom Elements
- Upcoming WHATNOT meeting on 5/30/2024
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 html.