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

Asked 18/1, 2012 at 7:19 Answered 3/6, 2015 at 6:13

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

Nachison answered 18/1, 2012 at 7:19 Comment(4)

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 api.jquery.com/on – Olsen 19/1, 2012 at 5:7

@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. – Nachison 19/1, 2012 at 6:9

hi, please refer this URL you will need to addEventListener for touch on ipad or iphone 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. – Olsen 19/1, 2012 at 6: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 – Nachison 19/1, 2012 at 7:23

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.

Basanite answered 3/6, 2015 at 6:13 Comment(0)

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

Boatright answered 6/9, 2012 at 16:35 Comment(0)

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.

Olsen answered 19/1, 2012 at 7:44 Comment(0)

Recommended topics

Hot tags