Javascript css 指针事件属性更改和相应的 jquery 事件不会一起触发
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8906520/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css pointer-events property change and respective jquery events not triggering together
提问by user850234
Here is my code segment. I am using iscroll 4 for scroll in touch devices and desktop.
这是我的代码段。我正在使用 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');
}
});
I have the click event on #next_itemwhich does a specific task and also have the drag event on #next_itemwhich does different task. Now the problem is when #next_itemreceives drag event the css pointer-eventsis changed to noneimmediately but the drag is not triggering. When i do mouseupand then again drag from over #next_itemthen only the drag is triggered. I need the css pointer-eventsto pass drag event to the underlying element. Please suggest if i am doing anything wrong. Without pointer-eventsiscroll gives error while passing the drag event below #next_item
我有#next_item执行特定任务的点击事件，也有#next_item执行不同任务的拖动事件。现在的问题是，当#next_item收到拖动事件时css pointer-events，none立即更改为，但未触发拖动。当我这样做mouseup然后再次从上方拖动时，#next_item只会触发拖动。我需要css pointer-events将拖动事件传递给底层元素。请建议我是否做错了什么。没有pointer-eventsiscroll 在传递下面的拖动事件时会出错#next_item
回答by 1990rk4
When you want to disable the pointer event for an element with
.css():$('#element_id').css('pointer-events','none');When you want to enable the pointer event for an element with
.css():$('#element_id').css('pointer-events','');
当您想禁用元素的指针事件时
.css()：$('#element_id').css('pointer-events','none');当您想为元素启用指针事件时
.css()：$('#element_id').css('pointer-events','');
In #1, the element gets disabled and then you cannot access that element.
在 #1 中，元素被禁用，然后您无法访问该元素。
In #2, the same element gets enabled and you can perform other jQuery operation on it.
在#2 中，启用了相同的元素，您可以对其执行其他 jQuery 操作。
回答by Dawson
I've had better luck using the methods provided with iScroll rather than rolling my own. Specifically, onBeforeScroll and onScrollEnd.
我使用 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);
Also, the inclusion of the listeners for touch and the DOM help. Wish I knew exactly what you were trying to do - might be able to show you a better example.
此外，还包含了用于触摸和 DOM 帮助的侦听器。希望我确切地知道你想要做什么 - 也许可以向你展示一个更好的例子。
If I'm way off, I'll pull this answer. BTW, jQ 1.6.4 working fine for this answer.
如果我离开了，我会拉这个答案。顺便说一句，jQ 1.6.4 可以很好地解决这个问题。
HTH
HTH
回答by Murtaza
Include the following <script>in your page:
<script>在您的页面中包含以下内容：
HTML
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>
It is just an example, as I am completely unaware of what functionality you want from your code snippet. It may not answer your entire question, but this is the logical flow required to solve the problem.
这只是一个示例，因为我完全不知道您想要从代码片段中获得什么功能。它可能无法回答您的整个问题，但这是解决问题所需的逻辑流程。
![[object 对象] 是什么意思？(JavaScript)](/res/img/loading.gif)