breaks clicks, links and other trivial events

[teo1978]

Example

html:

<div id="mydiv">
<a href="http://whatever">link1</a> <a href="http://whatever">link2</a> 
</div>

javascript:

$("#mydiv").swipe({
		swipeLeft:function() {
			// do something
		},
		swipeRight:function() {
			// do something
		},
		threshold: 200,
		fingers: 2
	})

Expected: swiping with two fingers on the div "mydiv" should "do something". Links inside the div should work as they usually do.

Observed: swiping with two fingers works as expected, but the links contained in the div are now not clickable.

Obviously, the plugin intercepts the touch events, detects the swipe gesture, and doesn't "pass on" events that are not detected as swipes. I guess this can be partially worked around by using the click callback, but this shouldn't be necessary.

Events that are not swipe-related should work out of the box, at least by default. This applies both to click events handled via javascript by code unrelated to the plugin, and (even more) to interaction that doesn't involve any javascript whatsoever, such as clicking on a link.

[teo1978]

I have tried with preventDefaultEvents: false and it doesn't fix the issue.

I don't think preventDefaultEvents should be needed to accomplish this. One thing is whether or not you want to prevent the defaults when a swipe is detected, another thing is whether you want normal events to be triggered when a swipe is not detected, which should be the default.

I also noticed this in the changelog:

$version 1.6.16 - Swipes with 0 distance now allow default events to trigger. So tapping any form elements or A tags will allow default interaction, but swiping will trigger a swipe.

That doesn't seem to work.

[mattbryson]

Have you looked at

http://labs.rampinteractive.co.uk/touchSwipe/demos/Excluded_children.html

On Sun, 23 Apr 2017, 20:15 teo1978, [email protected] wrote:

I have tried with preventDefaultEvents: false and it doesn't fix the issue.

I don't think preventDefaultEvents should be needed to accomplish this. One thing is whether or not you want to prevent the defaults when a swipe is detected, another thing is whether you want normal events to be triggered when a swipe is not detected, which should be the default.

I also noticed this in the changelog:

$version 1.6.16 - Swipes with 0 distance now allow default events to trigger. So tapping any form elements or A tags will allow default interaction, but swiping will trigger a swipe.

That doesn't seem to work.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/issues/314#issuecomment-296481713, or mute the thread https://github.com/notifications/unsubscribe-auth/AAhgVBmQjGnFjGBgVxgxYDNM1Yu-JUZIks5ry6NdgaJpZM4NFf6f .

[matteosistisette]

Yes, I have looked, and it says a elements are already (supposed to be) excluded.

Which, by the way, is in contraddiction with this in the changelog (just after the bit I quoted above):

Removed the a, input, select etc from the excluded Children list as the 0 distance tap solves that issue.

Either way, when simply tapping on a link (or on anything for that matter) and not swiping, it should work out of the box.

[lovemoebious]

I also seem to be having this problem.

$('html').swipe( {
swipe:function(event, direction, distance, duration) {
},
threshold:0,
fingers:'all'
});

As soon as this is activated all the links on my page stop working. Swiping and everything else works perfectly fine, it's exclusively just links.

[javierojeda94]

I made mine work with this option:

excludedElements: $.fn.swipe.defaults.excludedElements + ', button, input, select, textarea, a'

I don't know why but for some reason, this says that for default every button, input, select, textarea, a and .noSwipe class are excluded but in my browser console, when I type $.fn.swipe.defaults.excludedElements it only outputs .noSwipe

Should I will lookup for the reason and fix it or is this behaviour as expected?

I hope this helps someone

[Respheal]

I've got this issue as well, but I've got a particularly problematic implementation that's preventing me from using @javierojeda94's workaround: The item I want swiping to work over IS a link.

<div id="mydiv">
<a href="http://whatever"><img that fills the whole div></a>
</div>

javascript:

$("#mydiv").swipe({
		swipeLeft:function() {
			// do something
		},
		swipeRight:function() {
			// do something
		},
		tap:function(event, target) {
			// navigateTo(url)
		},
		threshold: 200,
		fingers: 1
	})

I added in the tap function thinking that'd act as a link (my navigateTo function is used elsewhere in arrow-key navigation, repurposed here), but no go.

[mattbryson]

I'll have a look into this and see what can be done. It is not as simple as saying all events should bubble up, as the browser will then interpret the event and take over - page scroll, pinch zoom etc etc. There needs to be some interception so you can swipe, whilst letting clicks etc bubble up etc...

[kwsim539]

The solution that javierojeda94 came up with worked perfect for me. Thanks.

[mattbryson]

Will be looking at this in the next release that re works the event model

[dirad]

Is this project abandoned in a way? Im using it to implement a side screen / edge swipe feature, and using the swipe on body under some condition. But it breaks all inputs inside those screens im building...

[mattbryson]

Hi - yes, Im afraid I haven't had any time to work on this over the last few years.

The plan is to re write the whole thing without jQuery, and then build a simple jquery wrapper to allow existing users to update, but just not found the time to get on to it yet.

regarding your issue - have you tried adding the class ".noSwipe" to the elements you are trying to select, or to a parent element ?

[dirad]

It does make sense to just add noSwipe to everything, but I was able to get it working with adding , excludedElements: 'button, input, select, textarea, a, .noSwipe' to the ('body').swipe({}) init.

I'm using swipeStatus [to get direction, distance and duration] but i think it's kind of heavy.. Does work though.

Good luck in your endeavors and hopefully this one as well. 🏑

[mattbryson]

Glad you got it working.

I'll have a look at a quick update, maybe adding that in, sounds like a previous change has removed the button, input etc.

Hopefully I'll get some time this year to re write TouchSwipe, would be a shame to let it die!

Cheers

Matt

On 6 Feb 2023 at 10:27:47, Adir Dee @.***> wrote:

It does make sense to just add noSwipe to everything, but I was able to get it working with adding , excludedElements: 'button, input, select, textarea, a, .noSwipe' to the ('body').swipe({}) init.

I'm using swipeStatus [to get direction, distance and duration] but i think it's kind of heavy.. Does work though.

Good luck in your endeavors and hopefully this one as well. 🏑

— Reply to this email directly, view it on GitHub https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/issues/314#issuecomment-1418853938, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEGAVD4WPTNZQL3P5ITAO3WWDG2HANCNFSM4DIV72PQ . You are receiving this because you commented.Message ID: @.***>