9

これが私のコードセグメントです。タッチデバイスとデスクトップのスクロールにiscroll4を使用しています。

$('#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ドラッグイベントを基になる要素に渡す必要があります。私が何か間違ったことをしている場合は提案してください。iscrollがないpointer-eventsと、下のドラッグイベントを渡すときにエラーが発生します#next_item

4

3 に答える 3

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が正常に機能しています。

HTH

于 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 に答える