css pointer-events property change and respective jquery events not triggering together

Question

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

Which version of jQuery are you using? Have you tried jQuery `on` function instead of `bind`. remember this work with jQuery 1.7+ version refer http://api.jquery.com/on/ — Murtaza, Jan 19 '12 at 05:07
@Murtaza: I tried using jquery `on` function and jquery 1.7 version. It is working in desktop but could not make it work on ipad or iphone. Can you use `on` function in my code snippet and show me the working. — user850234, Jan 19 '12 at 06:09
hi, please refer this URL you will need to `addEventListener` for touch on ipad or iphone http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ Hope this solves your problem, if does please let me know will place it as answer so that others can refer. — Murtaza, Jan 19 '12 at 06:25
@Murtaza: I could not make it work. Can you elaborate by showing it in my code. `mymove` and `mydown` could not figure it out how to use — user850234, Jan 19 '12 at 07:23

score 25 · Answer 1 · edited Oct 29 '15 at 05:56

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.

score 4 · Answer 2 · answered Sep 06 '12 at 16:35

I've had better luck using the methods provided with iScroll rather than rolling my own. Specifically, onBeforeScroll and onScrollEnd.

var myScroll;

function loaded() {
    myScroll = new iScroll('scroller-parent', {
        onBeforeScrollStart: function () {
            $('#scroller').css('opacity',0.5); // just for a visual ref
            return false;
        },
        onScrollEnd: function () {
            alert('done');
            $('#scroller').css('opacity',1);
        }
    });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

Also, the inclusion of the listeners for touch and the DOM help. Wish I knew exactly what you were trying to do - might be able to show you a better example.

If I'm way off, I'll pull this answer. BTW, jQ 1.6.4 working fine for this answer.

HTH

score 3 · Answer 3 · edited Sep 06 '12 at 20:17

Include the following <script> in your page:

HTML

<head>
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script>
  <script src="jquery.ui.touch-punch.min.js"></script>
  <script>
    $(document).ready(function () {
      $('#widget').draggable();   // This is required for drag...
      $('#widget').dialog().addTouch();

      // Here you call your functions and perform
      // the functionality for touch and drag...

    });
   </script>

</head>
<body>
  <div id="widget" style="width:200px; height:200px border:1px solid red" ></div>
</body>

It is just an example, as I am completely unaware of what functionality you want from your code snippet. It may not answer your entire question, but this is the logical flow required to solve the problem.

css pointer-events property change and respective jquery events not triggering together

3 Answers3