Solved

hammer.js tap and pressup interferences

Posted on 2016-11-25
15
19 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
  • 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

792 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