https://saxonica.plan.io/https://saxonica.plan.io/favicon.ico2023-05-19T16:39:10ZSaxonica Developer CommunitySaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=238492023-05-19T16:39:10ZNorm Tovey-Walsh
<ul></ul><p>Do you have any kind of example for this? I can't reproduce it. OTOH, I also can't work out how to scroll an SVG. Everything I see on the web says that you should set scroll:overflow on the wrapper. AFAICT, an onwheel event doesn't cause any problems on a DIV.</p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=238502023-05-20T14:44:40ZMartin Honnenmartin.honnen@gmx.de
<ul></ul><p><a href="https://chromestatus.com/feature/6662647093133312" class="external">https://chromestatus.com/feature/6662647093133312</a> suggests that with Chrome (and I think also Mozilla) <code>wheel</code> and similar at the <code>window</code> or <code>document</code> or <code>document.body</code> level are by default treated as passive.</p>
<p>And doesn't SaxonJS register event listeners you declare with <code>mode="ixsl:onXXX"</code> at the window or document level, meaning any use of <code>ixsl:onwheel</code> will have a listener created and subjected to the "default" passive setting Chrome imposes?</p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=238512023-05-20T16:10:04ZMartin Honnenmartin.honnen@gmx.de
<ul></ul><p><a href="https://martin-honnen.github.io/xslt/2023/onwheel/sample1.html" class="external">https://martin-honnen.github.io/xslt/2023/onwheel/sample1.html</a> is a test case (just with HTML, no SVG used) that has e.g.</p>
<pre><code class="xml syntaxhl" data-language="xml"> <span class="nt"><xsl:template</span> <span class="na">match=</span><span class="s">"div[@id = 'div1']"</span> <span class="na">mode=</span><span class="s">"ixsl:onwheel"</span><span class="nt">></span>
<span class="nt"><xsl:message</span> <span class="na">select=</span><span class="s">"saxon:timestamp() || ': ' || ixsl:event() => ixsl:get('type')"</span><span class="nt">/></span>
<span class="nt"></xsl:template></span>
<span class="nt"><xsl:template</span> <span class="na">match=</span><span class="s">"div[@id = 'div1']"</span> <span class="na">mode=</span><span class="s">"ixsl:onmouseover"</span><span class="nt">></span>
<span class="nt"><xsl:message</span> <span class="na">select=</span><span class="s">"saxon:timestamp() || ': ' || ixsl:event() => ixsl:get('type')"</span><span class="nt">/></span>
<span class="nt"></xsl:template></span>
<span class="nt"><xsl:template</span> <span class="na">match=</span><span class="s">"div[@id ='div2']"</span> <span class="na">mode=</span><span class="s">"ixsl:onwheel"</span><span class="nt">></span>
<span class="nt"><xsl:message</span> <span class="na">select=</span><span class="s">"saxon:timestamp() || ': ' || ixsl:event() => ixsl:get('type'), ixsl:event() => ixsl:call('preventDefault', [])"</span><span class="nt">/></span>
<span class="nt"></xsl:template></span>
</code></pre>
<p>for which you can see in the browser console that SaxonJS sets up two document wide event listeners where the <code>mouseover</code> has <code>passive</code> as <code>false</code> but the <code>wheel</code> get the default <code>passive</code> as <code>true</code> and that way the attempt to call <code>preventDefault</code> causes Chrome to emit</p>
<blockquote>
<p>[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <a href="https://www.chromestatus.com/feature/6662647093133312" class="external">https://www.chromestatus.com/feature/6662647093133312</a></p>
</blockquote> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=238522023-05-20T16:11:23ZMartynas Jusevicius
<ul></ul><p>Thanks Martin :)</p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=238532023-05-20T16:14:31ZMartynas Jusevicius
<ul></ul><p>My code looks like this:</p>
<pre><code data-language="xsl"> <xsl:template match="svg:svg" mode="ixsl:onwheel">
<xsl:sequence select="ixsl:call(ixsl:event(), 'preventDefault', [])"/>
...
</code></pre> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=238542023-05-20T16:18:22ZMartin Honnenmartin.honnen@gmx.de
<ul><li><strong>File</strong> <a href="/attachments/64094">Screenshot 2023-05-20 181518.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/64094/Screenshot%202023-05-20%20181518.png">Screenshot 2023-05-20 181518.png</a> added</li></ul><p>Here is a screeshot from the Chrome developer tools that shows that the two event listeners for <code>mouseover</code> and <code>wheel</code> are being set up by the same SaxonJS code but result in different <code>passive</code> settings due to the default that Chrome enforces for <code>wheel</code>:</p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=238552023-05-20T23:26:16ZMartynas Jusevicius
<ul></ul><p>Just to clarify what I was trying to do: prevent window scroll during <code>onwheel</code> and zoom the SVG in/out instead.</p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=238572023-05-22T10:34:51ZNorm Tovey-Walsh
<ul></ul><p>Ah, this is an issue in Chrome, not Firefox.</p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=238582023-05-22T10:55:24ZNorm Tovey-Walsh
<ul></ul><p>FWIW, it isn't that we set <code>passive</code> true, it's:</p>
<blockquote>
<p>If not specified, defaults to false – except that in browsers other than Safari, defaults to true for the <code>wheel</code>, <code>mousewheel</code>, <code>touchstart</code> and <code>touchmove</code> events.</p>
</blockquote> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=238592023-05-22T12:31:28ZMartynas Jusevicius
<ul></ul><p>OK, so my question is then: how do I port the following JS code to SaxonJS? From <a href="https://codepen.io/osublake/pen/oGoyYb" class="external">https://codepen.io/osublake/pen/oGoyYb</a></p>
<pre><code class="js syntaxhl" data-language="js"><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="dl">"</span><span class="s2">wheel</span><span class="dl">"</span><span class="p">,</span> <span class="nx">onWheel</span><span class="p">);</span>
<span class="kd">function</span> <span class="nx">onWheel</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">event</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
<span class="p">...</span>
</code></pre> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=238602023-05-22T12:48:00ZNorm Tovey-Walsh
<ul></ul><p>Sorry. I wasn't suggesting that we don't need to fix this bug. I was just clarifying that it isn't the result of an explicit choice on our part, but rather a case of varying defaults. It's a bug, or at least an obviously missing feature, and we should fix it.</p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=238612023-05-22T14:55:51ZMartynas Jusevicius
<ul></ul><p>I'm sorry too, my comment wasn't meant to come accross as harsh :)</p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=239202023-06-01T12:53:31ZNorm Tovey-Walsh
<ul><li><strong>Status</strong> changed from <i>New</i> to <i>Resolved</i></li><li><strong>Applies to JS Branch</strong> <i>Trunk</i> added</li><li><strong>Applies to JS Branch</strong> deleted (<del><i>2</i></del>)</li><li><strong>Fix Committed on JS Branch</strong> <i>Trunk</i> added</li></ul><p>Only one listener is instantiated for any given event type (e.g., there's only one listener for <code>wheel</code> events no matter how many <code>xsl:template</code> elements match in that mode). Consequently, the <code>ixsl:event-options</code> attribute is placed on the <code>xsl:mode</code> declaration:</p>
<pre><code><xsl:mode name="ixsl:onwheel"
ixsl:event-options="map{'passive':false()}"/>
</code></pre>
<p>The <code>ixsl:event-options</code> attribute is an expression. It may not refer to the context. If it refers to variables, they must be static.</p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=240052023-06-08T13:36:44ZMartynas Jusevicius
<ul></ul><p>Hmm I'm not sure this helps to address my use case in the light of <a href="https://saxonica.plan.io/issues/5923?pn=1#note-2" class="external">Martin's comment</a>. I'll try to produce a test case.</p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=240062023-06-08T17:00:15ZNorm Tovey-Walsh
<ul></ul><p>I'm not sure what to suggest by way of a workaround for now. This is fixed for SaxonJS 3.0.</p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=240072023-06-08T17:32:13ZMartynas Jusevicius
<ul><li><strong>Company</strong> set to <i>Martynas Jusevičius</i></li><li><strong>Contact person</strong> set to <i>Martynas Jusevičius</i></li></ul><p>My understanding is that despite this new feature allowing to set event<br>
option ‘passive: false()’, it will have no effect because document-level<br>
events are “passive by default” and SaxonJS is binding listeners at<br>
document level. Does that make sense?</p>
<p>On Thu, 8 Jun 2023 at 19.00, Saxonica Developer Community <<br>
<a href="mailto:notifications@plan.io" class="email">notifications@plan.io</a>> wrote:</p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=240082023-06-09T08:08:53ZNorm Tovey-Walsh
<ul></ul><p>Do you have a citation for the 'passive by default' problem?</p>
<p>I tested the fix by verifying that an onwheel event generated console log errors in Chrome before I used the new feature to set passive to false, and not after I set it to false.</p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=240112023-06-10T20:22:01ZMartynas Jusevicius
<ul></ul><p>This is what Martin linked to earlier in the thread: <a href="https://chromestatus.com/feature/6662647093133312" class="external">Feature: Treat Document Level Wheel/Mousewheel Event Listeners as Passive</a></p> SaxonJS - Feature #5923: Provide a way to control event listener parametershttps://saxonica.plan.io/issues/5923?journal_id=240122023-06-10T20:23:41ZMartynas Jusevicius
<ul></ul><blockquote>
<p>The wheel/mousewheel event listeners that are registered on document level targets (window.document, window.document.body, or window) will be treated as passive <strong>if not specified as otherwise</strong> and calling preventDefault() inside such listeners will be ignored.</p>
</blockquote>
<p>OK so maybe it would work... I would need to test.</p>