modifica proprietà eventi puntatore css e rispettivi eventi jquery che non si attivano insieme

Ecco il mio segmento di codice. Sto usando iscroll 4 per scorrere in dispositivi touch e desktop.modifica proprietà eventi puntatore css e rispettivi eventi jquery che non si attivano insieme

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

devo l'evento click su #next_item che fa un compito specifico e hanno anche l'evento di trascinamento sul #next_item che fa compito diverso. Ora il problema si verifica quando #next_item riceve un evento di trascinamento e lo css pointer-events viene modificato in none immediatamente ma il trascinamento non viene attivato. Quando eseguo il comando mouseup e poi di nuovo trascino da oltre #next_item, viene attivato solo il trascinamento. Ho bisogno dello css pointer-events per passare l'evento di trascinamento all'elemento sottostante. Si prega di suggerire se sto facendo qualcosa di sbagliato. Senza pointer-events iscroll dà errore durante il passaggio del evento di trascinamento sottostante #next_item

fonte

2012-01-18 user850234

Quale versione di jQuery stai usando? Hai provato la funzione 'on' di jQuery invece di' bind'. ricorda questo lavoro con jQuery versione 1.7+ consulta http://api.jquery.com/on/ – Murtaza

Sto usando jquery 1.6.2 – user850234

@Murtaza: Ho provato ad usare jQuery 'on' function e jquery 1.7 versione. Funziona sul desktop ma non può farlo funzionare su ipad o iphone. Puoi usare la funzione 'on' nel mio frammento di codice e mostrarmi il funzionamento. – user850234

Includere il seguente <script> nella tua pagina:

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>

E 'solo un esempio, come io sono completamente all'oscuro di quali funzionalità vuoi dal tuo snippet di codice. Potrebbe non rispondere all'intera domanda, ma questo è il flusso logico necessario per risolvere il problema.

fonte

2012-01-19 07:44:01 Murtaza

Ho avuto più fortuna ad usare i metodi forniti con iScroll piuttosto che rotolare il mio. In particolare, onBeforeScroll e 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);

Inoltre, l'inclusione degli ascoltatori per il tocco e l'aiuto DOM. Vorrei sapere esattamente quello che stavi cercando di fare - potrebbe essere in grado di mostrarti un esempio migliore.

Se sono via, tirerò questa risposta. BTW, jQ 1.6.4 funziona bene per questa risposta.

HTH

fonte

2012-09-06 16:35:46 Dawson

Quando si desidera disattivare l'evento puntatore per un elemento con .css():
```
$('#element_id').css('pointer-events','none'); 
```
Quando si desidera attivare l'evento puntatore per un elemento con .css():
```
$('#element_id').css('pointer-events',''); 
```

In # 1, l'elemento viene disattivato e quindi non si può accedere a tale elemento.

In # 2, lo stesso elemento viene abilitato ed è possibile eseguire altre operazioni jQuery su di esso.

fonte

2015-06-03 06:13:41

modifica proprietà eventi puntatore css e rispettivi eventi jquery che non si attivano insieme

risposta

Problemi correlati