Solved

hammer.js tap and pressup interferences

Posted on 2016-11-25
15
6 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 30

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
 
LVL 30

Author Comment

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

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 30

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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 30

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 30

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 30

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 30

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 30

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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now