css puntero-eventos cambio de propiedad y los respectivos eventos de jquery no se activan juntos

Aquí está mi segmento de código. Estoy usando iscroll 4 para desplazamiento en dispositivos táctiles y escritorio.css puntero-eventos cambio de propiedad y los respectivos eventos de jquery no se activan juntos

$('#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'); 
    } 
});

Tengo el evento click en #next_item, que realiza una tarea específica y también tienen el evento de arrastre en #next_item, que hace tarea diferente. Ahora el problema es cuando #next_item recibe el evento de arrastre el css pointer-events se cambia a none inmediatamente pero el arrastre no se activa. Cuando hago mouseup y vuelvo a arrastrar desde #next_item, solo se activa el arrastre. Necesito el css pointer-events para pasar el evento de arrastre al elemento subyacente. Por favor sugiera si estoy haciendo algo mal. Sin pointer-events iscroll da error al pasar el evento de arrastre por debajo de #next_item

Fuente

2012-01-18 user850234

¿Qué versión de jQuery estás usando? ¿Has probado la función jQuery 'on' en lugar de' bind'. recuerde este trabajo con la versión jQuery 1.7+ consulte http://api.jquery.com/on/ – Murtaza

Estoy usando jquery 1.6.2 – user850234

@Murtaza: Intenté usar la función jquery 'on' y la versión jquery 1.7. Está funcionando en el escritorio pero no pudo hacerlo funcionar en ipad o iphone. ¿Puedes usar la función 'on' en mi fragmento de código y mostrarme el funcionamiento? – user850234

Incluir la siguiente <script> en su página:

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>

Es sólo un ejemplo, ya que estoy completamente inconsciente de lo que la funcionalidad lo que quiere de su fragmento de código. Puede que no responda toda tu pregunta, pero este es el flujo lógico requerido para resolver el problema.

Fuente

2012-01-19 07:44:01 Murtaza

He tenido mejor suerte utilizando los métodos que se proporcionan con iScroll en lugar de rodar los míos. Específicamente, onBeforeScroll y 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);

Además, la inclusión de los oyentes para el toque y la ayuda DOM. Ojalá supiera exactamente lo que estabas tratando de hacer, podría ser capaz de mostrarte un mejor ejemplo.

Si estoy lejos, obtendré esta respuesta. BTW, jQ 1.6.4 funciona bien para esta respuesta.

HTH

Fuente

2012-09-06 16:35:46 Dawson

Cuando desee desactivar el evento puntero a un elemento con .css():
```
$('#element_id').css('pointer-events','none'); 
```
Cuando se desea habilitar el evento puntero a un elemento con .css():
```
$('#element_id').css('pointer-events',''); 
```

En el n. ° 1, el elemento se desactiva y luego no puede acceder a ese elemento.

En el n. ° 2, el mismo elemento se habilita y puede realizar otra operación jQuery en él.

Fuente

2015-06-03 06:13:41

css puntero-eventos cambio de propiedad y los respectivos eventos de jquery no se activan juntos

Respuesta

Cuestiones relacionadas