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

Question

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

51.2k views Asked by user850234 At 22 November 2024 at 07:18

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

Original Q&A

There are 3 answers

**Murtaza** · Answer 1 · 2012-01-19 07:44:01

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.

**1990rk4** · Answer 2 · 2015-06-03 06:13:41

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.

**Dawson** · Answer 3 · 2012-09-06 16:35:46

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

TechQA.

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

There are 3 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in CSS

Related Questions in ISCROLL4

Popular Questions

Popular Tags

Trending Questions