Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 64
  • Last Modified:

hammer.js tap and pressup interferences

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
Marco Gasi
Asked:
Marco Gasi
  • 9
  • 6
2 Solutions
 
leakim971PluritechnicianCommented:
line 1, I see a right parenthese : 'tr)' instead 'tr'
0
 
Marco GasiFreelancerAuthor Commented:
Hi leakim971. It's just  typo here in my question. There isn't in my code.
0
 
leakim971PluritechnicianCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Marco GasiFreelancerAuthor Commented:
Oh, yes: let me check it, please.
0
 
Marco GasiFreelancerAuthor Commented:
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
 
Marco GasiFreelancerAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Marco GasiFreelancerAuthor Commented:
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
 
leakim971PluritechnicianCommented:
because it's an hammer event, not a native browser event
0
 
Marco GasiFreelancerAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Marco GasiFreelancerAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Marco GasiFreelancerAuthor Commented:
This second snippet looks interesting. I'll give it a try for sure. Thank you again!
1
 
Marco GasiFreelancerAuthor Commented:
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

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

  • 9
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now