Solved

hammer.js tap and pressup interferences

Posted on 2016-11-25
15
31 Views
Last Modified: 2016-11-30
Hi everybody.
I'm implementing hammer 2 to manage pressup and tap event on table rows. Everything works fine but I get an issue. This is my code:

$('#grid_in').hammer({time: 1000, domEvents: true}).on('pressup', 'tr)', function () {
    $(this).addClass('row-selected');
})
$('#grid_in').hammer({domEvents: true}).on('tap', 'tr:not(.row-selected)', function () {
    $(this).removeClass('row-selected');
});

Open in new window


So if I press for just a few time, the class is added and then immediately removed: it looks like pressup fires even if I press for less a second. What do I am missing?

Thank you for your help.
0
Comment
Question by:Marco Gasi
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 6
15 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 41901530
line 1, I see a right parenthese : 'tr)' instead 'tr'
0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901549
Hi leakim971. It's just  typo here in my question. There isn't in my code.
0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 500 total points
ID: 41901554
ok what about (we have removed the tap event) :

$('#grid_in').hammer({time: 1000, domEvents: true}).on('pressup', 'tr)', function () {
    $('tr', '#grid_in').removeClass('row-selected');
    $(this).addClass('row-selected');
});

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901560
Oh, yes: let me check it, please.
0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901574
Unfortunately, no success.
Tap and press work great: the issue arises only if I press only for less than a second.
Tap (up to 250 milliseconds): ok
Press for 1000 milliseconds: ok, when I stop to press, pressup is fired
Press for a time between 251 and 1000 seconds first fires pressup and then it fires tap. It looks like even the 'press' event be fired though it not be implemented. I'm going to try to implement press event preventing default...
0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901600
Nothing to do. I also tried to put e.stopPropagation() in both pressup and tap events.
Putting some log, I see only that pressup vents is fired even for a pressure shorter than the set time... Really strange.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41901625
pressup is not a good event, maybe use tap or touchend :
$('#grid_in').hammer({time: 1000, domEvents: true}).on('touchend', 'tr)', function (evt) {
    evt.stopImmediatePropagation(); // stronger
    $('tr', '#grid_in').removeClass('row-selected');
    $(this).addClass('row-selected');
});

Open in new window

0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901654
Can I ask why pressup is not a good event? Also, does touchend fires even when user tap? Anyway, I'm going to try
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41901698
because it's an hammer event, not a native browser event
0
 
LVL 31

Accepted Solution

by:
Marco Gasi earned 0 total points
ID: 41901718
Ok, leakim, I found it. The problem was in another part of the code (as often it happens to me):
	$('body').on('click', function (e) {
		e.stopImmediatePropagation();
		$('#mg-commands').fadeOut();
		$('#grid_in tr').removeClass('row-selected');
		$(this).find('div.row-checked').fadeOut();
	});

Open in new window


This code was intended to cancel selection if user taps in any part of the body: once commented out, everything works fine.
But I still would like to allow the user to cancel selection tapping in any other part of the page except the table. I tried to do something like this but it doesn't work, in the sense that the previous bug arises again (if I just remove this code it is perfect).
$('body:not(#grid)').on('click', function (e) {

Open in new window


Any idea on how I can bind an event to the body excluding some specific element (possibly a list of elements)?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41901753
usualy the method is to cover the whole body with a div and display the object (popup, selection, what you want) over this overlay
so i'm not sure about a different logic...

you can try to fight with a if/else with :
$(e.target) / e.target which is the element receiving the tap.

$('body').on('click', function (e) {
    alert("you touch : " + e.target.toString() ); 

Open in new window

0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901760
Mmmhh, it sounds godd but after all I'll let the user tap the row or press the phone back button to deselect the selected row: it's an expected behavior and it looks a lot of work to get something it isn't really needed :)
Thank you, leakim
0
 
LVL 82

Expert Comment

by:leakim971
ID: 41901763
another way is to use a setTimeout on the body

$('body').on('click', function (e) {
     setTimeout(function() {
          var isNotOnTableFlag = !!$('#grid_in').hasClass("clickedOnMe");
          if(isNotOnTableFlag)  {
                $('#grid_in').removeClass("clickedOnMe");
		e.stopImmediatePropagation();
		$('#mg-commands').fadeOut();
		$('#grid_in tr').removeClass('row-selected');
		$(this).find('div.row-checked').fadeOut();              
          }
    }, 50);
});

$('#grid_in').hammer({time: 1000, domEvents: true}).on('touchend', 'tr', function (evt) {
    $('#grid_in').addClass("clickedOnMe");

Open in new window

0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 41901766
This second snippet looks interesting. I'll give it a try for sure. Thank you again!
1
 
LVL 31

Author Closing Comment

by:Marco Gasi
ID: 41907014
Thank you for having been with me: talking with someone often hepls enough even without a solving answer. It helps to think clearly :)
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This video teaches users how to migrate an existing Wordpress website to a new domain.

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question