Here is my code segment. I am using iscroll 4 for scroll in touch devices and desktop.
$('#next_item').bind('mousedown touchstart',function (e) {
//do something onclick
$(this).bind('mousemove touchmove',function(e){ //triggers only when i drag over it
dragstart = true;
$(this).css('pointer-events', 'none');
myScroll._start(myDown);
return;
});
});
$('#next_item').bind('mouseup touchend',function (e) {
if(dragstart) {
dragstart = false;
$(this).css('pointer-events', 'auto');
}
});
I have the click event on #next_item
which does a specific task and also have the drag event on #next_item
which does different task. Now the problem is when #next_item
receives drag event the css pointer-events
is changed to none
immediately but the drag is not triggering. When i do mouseup
and then again drag from over #next_item
then only the drag is triggered. I need the css pointer-events
to pass drag event to the underlying element. Please suggest if i am doing anything wrong. Without pointer-events
iscroll gives error while passing the drag event below #next_item
When you want to disable the pointer event for an element with .css()
:
$('#element_id').css('pointer-events','none');
When you want to enable the pointer event for an element with .css()
:
$('#element_id').css('pointer-events','');
In #1, the element gets disabled and then you cannot access that element.
In #2, the same element gets enabled and you can perform other jQuery operation on it.