Изменение свойства указателя-событий CSS и соответствующих событий jquery, не инициируемых вместе - PullRequest
Новая
       20

Изменение свойства указателя-событий CSS и соответствующих событий jquery, не инициируемых вместе

7 голосов
/ 18 января 2012

Вот мой сегмент кода.Я использую iscroll 4 для прокрутки в сенсорных устройствах и на рабочем столе. 

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

У меня есть событие click на #next_item, которое выполняет определенную задачу, а также событие перетаскивания на #next_item, которое выполняет другую задачу,Теперь проблема в том, что когда #next_item получает событие перетаскивания, css pointer-events немедленно изменяется на none, но перетаскивание не запускается.Когда я делаю mouseup, а затем снова перетаскиваю из-за #next_item, тогда срабатывает только перетаскивание.Мне нужно css pointer-events, чтобы передать событие перетаскивания в базовый элемент.Пожалуйста, предложите, если я делаю что-то не так.Без pointer-events iscroll выдает ошибку при передаче события перетаскивания ниже #next_item

Ответы [ 3 ]

8 голосов
/ 03 июня 2015

  1. Если вы хотите отключить событие указателя для элемента с .css(): 

    $('#element_id').css('pointer-events','none');

  2. Если вы хотите включить указатель события для элемента с .css(): 

    $('#element_id').css('pointer-events','');

В # 1 элемент отключается, и вы не можете получить доступ к этому элементу.

В # 2 включается тот же элемент, и вы можете выполнять с ним другие операции jQuery.

4 голосов
/ 06 сентября 2012

Мне повезло больше, если я использовал методы, предоставляемые iScroll, вместо того, чтобы использовать свои собственные.В частности, onBeforeScroll и 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);

Кроме того, включение слушателей для касания и помощи DOM.Если бы я точно знал, что вы пытаетесь сделать - возможно, смог бы показать вам лучший пример.

Если я уйду, я вытащу этот ответКстати, JQ 1.6.4 отлично работает для этого ответа.

HTH

3 голосов
/ 19 января 2012

Добавьте на свою страницу следующее <script>:

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>

Это всего лишь пример, поскольку я совершенно не знаю, какую функциональность вы хотите получить из своего фрагмента кода.Возможно, он не отвечает на весь ваш вопрос, но это логический процесс, необходимый для решения проблемы.

...