9

这是我的代码段。我正在使用 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');
     }
});

我有执行特定任务的单击事件#next_item，也有#next_item执行不同任务的拖动事件。现在的问题是当#next_item接收到拖动事件时立即css pointer-events更改为none但拖动没有触发。当我这样做mouseup然后再次从上方拖动时，#next_item只会触发拖动。我需要css pointer-events将拖动事件传递给底层元素。请建议我是否做错了什么。没有pointer-eventsiscroll 在传递下面的拖动事件时会出错#next_item

4

3 回答 3

17

  1. 当你想禁用一个元素的指针事件时.css()：

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

  2. 当你想为一个元素启用指针事件时.css()：

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

在 #1 中，元素被禁用，然后您无法访问该元素。

在 #2 中，启用了相同的元素，您可以对其执行其他 jQuery 操作。

于 2015-06-03T06:13:41.960 回答
4

使用 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 可以很好地解决这个问题。

高温高压

于 2012-09-06T16:35:46.617 回答
3

<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>

这只是一个示例，因为我完全不知道您希望从代码片段中获得什么功能。它可能无法回答您的全部问题，但这是解决问题所需的逻辑流程。

于 2012-01-19T07:44:01.887 回答