thay đổi thuộc tính con trỏ-sự kiện css và các sự kiện jquery tương ứng không kích hoạt cùng nhau

Đây là đoạn mã của tôi. Tôi đang sử dụng iscroll 4 để cuộn trong các thiết bị cảm ứng và máy tính để bàn.thay đổi thuộc tính con trỏ-sự kiện css và các sự kiện jquery tương ứng không kích hoạt cùng nhau

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

tôi có sự kiện click vào #next_item mà hiện một nhiệm vụ cụ thể và cũng có trường hợp kéo trên #next_item mà làm nhiệm vụ khác nhau. Bây giờ vấn đề là khi #next_item nhận sự kiện kéo, css pointer-events được đổi thành none ngay lập tức nhưng thao tác kéo không kích hoạt. Khi tôi làm mouseup và sau đó kéo lại từ trên #next_item thì chỉ kéo được kích hoạt. Tôi cần css pointer-events để chuyển sự kiện kéo đến phần tử cơ bản. Xin đề nghị nếu tôi làm bất cứ điều gì sai trái. Nếu không có pointer-events iscroll cho lỗi khi đi qua các sự kiện kéo dưới #next_item

Nguồn

2012-01-18 user850234

Bạn đang sử dụng phiên bản jQuery nào? Bạn đã thử jQuery 'on' chức năng thay vì' ràng buộc'. hãy nhớ công việc này với phiên bản jQuery 1.7+ tham khảo http://api.jquery.com/on/ – Murtaza

Tôi đang sử dụng jquery 1.6.2 – user850234

@Murtaza: Tôi đã thử sử dụng hàm jquery 'on' và phiên bản jquery 1.7. Nó hoạt động trên máy tính để bàn nhưng không thể làm việc trên ipad hoặc iphone. Bạn có thể sử dụng 'on' chức năng trong đoạn mã của tôi và cho tôi thấy làm việc. – user850234

Bao gồm những điều sau <script> trong trang của bạn:

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>

Nó chỉ là một ví dụ, như tôi hoàn toàn không biết gì về những gì chức năng bạn muốn từ đoạn mã của mình. Nó có thể không trả lời toàn bộ câu hỏi của bạn, nhưng đây là luồng logic cần thiết để giải quyết vấn đề.

Nguồn

2012-01-19 07:44:01 Murtaza

Tôi đã may mắn hơn bằng cách sử dụng các phương pháp được cung cấp với iScroll thay vì tự cuộn của riêng mình. Cụ thể, onBeforeScroll và 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);

Ngoài ra, sự bao gồm của người nghe để liên lạc và trợ giúp DOM. Ước gì tôi biết chính xác những gì bạn đang cố gắng làm - có thể cho bạn thấy một ví dụ tốt hơn.

Nếu tôi sắp thoát, tôi sẽ lấy câu trả lời này. BTW, jQ 1.6.4 làm việc tốt cho câu trả lời này.

HTH

Nguồn

2012-09-06 16:35:46 Dawson

Khi bạn muốn vô hiệu hóa các sự kiện con trỏ cho một phần tử với .css():
```
$('#element_id').css('pointer-events','none'); 
```
Khi bạn muốn kích hoạt sự kiện con trỏ cho một phần tử với .css():
```
$('#element_id').css('pointer-events',''); 
```

Trong # 1, phần tử bị tắt và sau đó bạn không thể truy cập phần tử đó.

Trong # 2, cùng một yếu tố được bật và bạn có thể thực hiện thao tác jQuery khác trên đó.

Nguồn

2015-06-03 06:13:41

thay đổi thuộc tính con trỏ-sự kiện css và các sự kiện jquery tương ứng không kích hoạt cùng nhau

Trả lời

Các vấn đề liên quan