Comments (14)
I think Vladimir has done a really nice job but there are things that are kinda wonky (like this). Since JQM is dead, his framework is really the only option out there. There's a market for a good framework that is more html compatible which would make it easier for all sorts of plugins to be added (or moved over from jQuery.
And thanks for all your help on this!
from jquery-touch-events.
So I figured out a temporary workaround. At this point I've only tested this in a browser and not on an actual Android or iOS device but it's a building block you could use to add an actual "ignore list" to your really nice plugin:
$("#settingsPage").on("swiperight", function (event) {
el = document.elementFromPoint(event.handleObj.handler.arguments[1].startEvnt.offset.x,
event.handleObj.handler.arguments[1].startEvnt.offset.y);
if( $(el).hasClass("no-swipe") )
{
event.stopPropagation();
return(false);
}
else
goBack();
});
The problem that I see with this example is that document.elementFromPoint(x,y) is returning the parent div just surrounding the range slider. However it also contains the children. I'll let you figure out how to implement this but it should be pretty easy.
Cheers!
from jquery-touch-events.
The mechanics of the library, and in particular to the various swipe*
events boil down to mousemove
and touchmove
. As such, I think the easiest thing to implement and fix here would be to stop the move events on the range
input from propagating up the DOM tree.
Does something like this work?
$('#settingsPage').on('touchmove mousemove', 'input[type="range"]', function(e) {
e.stopPropagation();
});
from jquery-touch-events.
No, that didn't work.
I had already tried several methods of stopPropagation() and I couldn't get anything to work other than what I posted earlier. (sorry, full on ADD day! LOL)
from jquery-touch-events.
Okay, thanks. Could you put a minimal replicable example together for me to have a look at?
Thanks!
from jquery-touch-events.
I would just send you a link to what's on my server but I don't know if DM's are open on github.
My dm's are open on Twitter so hit me there. It's a rough framework for a new app but my main app has this same control and the same problem.
from jquery-touch-events.
I actually think this might be a conflict with F7. I've just put a demonstration together on jsFiddle, and adding in the suggestion of e.stopPropagation()
does indeed fix the issue.
Please see here: https://jsfiddle.net/benmajor/rxy93b6m/2/
from jquery-touch-events.
I think you're right. I'll post it there and see what he says.
from jquery-touch-events.
As an FYI, I posted the issue here
from jquery-touch-events.
Having followed the thread on the F7 forum, I'm going to go ahead and close this issue because it appears as though the problem is actually related to the way in which F7 intercepts native events.
If you do encounter any further issues, let me know!
from jquery-touch-events.
Yep, this should be closed (for now).
If anyone else wanders in here with this problem, here's how I worked around it (so far)
$("#settingsPage").on("swiperight", function (event) {
el = document.elementFromPoint(event.handleObj.handler.arguments[1].startEvnt.offset.x,
event.handleObj.handler.arguments[1].startEvnt.offset.y);
if( $(el).hasClass("no-swipe") )
{
// here we have to stop this event dead in its tracks
event.stopPropagation();
// next, get the id of the input (child) and trigger a change event on it
var elID = $("#" +el.id +" input").attr('id');
$( "#" +elID ).trigger( "change" );
return(false);
}
else
goBack();
});
// update the displayed value
$('#myid').on('change', function (e) {
// we need a micro timeout otherwise F7
// will not have fully updated the value
// so that it equals the label
setTimeout(()=>{
$('#valRange').text( $("#myid").val() );
}, 25);
});
It's messy but it seems to be working (mostly). In chrome the swiperight still gets invoked if I move the range slider from zero all the way to the right. I'll test it further on a device later today.
from jquery-touch-events.
Okay, thanks for the update. I'm glad that you managed to find a workaround, albeit slightly hacky! It's a shame that the library doesn't work right off the bat in F7, but I guess that's one of the problems of using multiple-dependency solutions.
from jquery-touch-events.
Yeah, it is a very nice framework and I've used in the past to spin up a few MVP demos. I have often wondered about releasing a more extensible framework that focuses more on functionality than theming, but I'm not really sure there's space in the market for another JS framework. I've been using React and Ionic for a while and I think that's where the hybrid market is heading.
from jquery-touch-events.
Everyone wants to go down that path but there's no market for it. 80% of cordova, react, ionic developers aren't deep coders. They're cobblers looking to put together apps that work as quickly and easily as possible. That requires an HTML5 compliant framework with sufficient .css widgets to do what one wants. Vladimir has the right idea but he gets in his own way... this bug is an example. The way he coded this widget, while it works in kitchensink it really doesn't work when you add in tools by other developers and that's the problem.... you can't force people to do everything exactly the way you want and the framework (be it jqm, react, ionic, f7) has to support that. He has other pieces that, following his own documentation, will blow the app up. (It's still the best thing out there.) As for react, no one has proven to me that Zuckerberg, Inc isn't injecting tracking code and I have too many clients that would freak at that thought... two govt clients have flat out ruled React out of the equation for that very reason. If you took F7 and fixed all the issues it's growth would explode but as it is, it's pretty limited. Lots of people like you will spin up a MVP and once the concept is proven they move on to other tools.
from jquery-touch-events.
Related Issues (20)
- Excluding an element HOT 2
- Swipe Up/Down event.target is always the body element and not the element under the finder HOT 3
- not support jquery 3.3.1 HOT 9
- Event.data being lost when combining tap/tapstart/tapend HOT 5
- Pinch HOT 1
- How to enable the touch events on Surface Pro? HOT 13
- Delay between tap and alert()/confirm() HOT 3
- Bug (with fix): Bubbling (or fast) touch event can cause a single tap to always trigger a taphold due to hold_timer overwrite HOT 1
- TypeScript declaration file? HOT 1
- Not supporting jQuery 3.4.1 HOT 9
- Angular 8 Support HOT 1
- Deprecated technique HOT 1
- Bug: Events can't be set on window or document
- Wrong swipe direction HOT 3
- Can't trigger long taps on Surface Pro HOT 8
- Webpack usage HOT 2
- Swipe event not working with touch screen in Microsoft Edge. HOT 4
- Not compatible with jQuery 3.6 HOT 3
- Setting the Threshold without the data-attribute 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 jquery-touch-events.