- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我有一个颜色选择器,可以一次选择两种不同的颜色;它应该像这样工作。触摸第一种颜色 -> 拖动到第二种颜色 -> 在第二种颜色上松开手指。问题是现在当我从屏幕上抬起手指时,touchend 事件会在第一种颜色上触发。不过,它在点击时效果很好。
$('.single-color').on('mousedown touchstart', function(e) {
e.preventDefault();
var index = $(this).attr('data-index');
$('#color1').val(index);
$('#color1').attr('data-color', $(this).css('background-color'));
console.log('touchstart - index: ' + $(this).attr('data-index'));
});
$('.single-color').on('mouseup touchend', function(e) {
e.preventDefault();
var index = $(this).attr('data-index');
$('#color2').val(index);
$('#color2').attr('data-color', $(this).css('background-color'));
console.log('touchend - index: ' + $(this).attr('data-index'));
});
.colors {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.single-color {
height: 50px;
width: calc(50% - 10px);
margin: 0 5px 5px 5px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="colors">
<li class="single-color" data-color="#4DB023" data-index="0" style="background-color: #4DB023">
</li>
<li class="single-color" data-color="#1E6B3D" data-index="1" style="background-color: #1E6B3D">
</li>
<li class="single-color" data-color="#233778" data-index="2" style="background-color: #233778">
</li>
<li class="single-color" data-color="#3098FF" data-index="3" style="background-color: #3098FF">
</li>
<li class="single-color" data-color="#FF0000" data-index="4" style="background-color: #FF0000">
</li>
<li class="single-color" data-color="#38889C" data-index="5" style="background-color: #38889C">
</li>
<li class="single-color" data-color="#483063" data-index="6" style="background-color: #483063">
</li>
</ul>
要重现该问题,请查看上面的代码片段,在 Chrome Resposive 工具中将视口(viewport)设置为 iPhone6,以便模拟触摸。
最佳答案
我用这个答案解决了:Get the element under a touchend
var $singleColors = $('.single-color');
$singleColors.on('mousedown touchstart', function(e) {
e.preventDefault();
var index = $(this).attr('data-index');
$singleColors.removeClass('active1');
$(this).addClass('active1');
$('#color1').val(index);
$('#color1').attr('data-color', $(this).css('background-color'));
console.log('touchstart - index: ' + $(this).attr('data-index'));
});
$singleColors.on('mouseup touchmove', function(e) {
e.preventDefault();
var endTarget = document.elementFromPoint(
e.originalEvent.touches[0].pageX,
e.originalEvent.touches[0].pageY
);
var index = $(endTarget).attr('data-index');
$singleColors.removeClass('active2');
$(endTarget).addClass('active2');
$('#color2').val(index);
$('#color2').attr('data-color', $(endTarget).css('background-color'));
console.log('touchend - index: ' + $(endTarget).attr('data-index'));
});
* {
box-sizing: border-box;
}
.colors {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.single-color {
height: 50px;
width: calc(50% - 10px);
margin: 0 5px 5px 5px;
float: left;
}
.single-color.active1, .single-color.active2 {
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="colors active2">
<li class="single-color active1" data-color="#4DB023" data-index="0" style="background-color: #4DB023">
</li>
<li class="single-color" data-color="#1E6B3D" data-index="1" style="background-color: #1E6B3D">
</li>
<li class="single-color" data-color="#233778" data-index="2" style="background-color: #233778">
</li>
<li class="single-color" data-color="#3098FF" data-index="3" style="background-color: #3098FF">
</li>
<li class="single-color" data-color="#FF0000" data-index="4" style="background-color: #FF0000">
</li>
<li class="single-color active1 active2" data-color="#38889C" data-index="5" style="background-color: #38889C">
</li>
<li class="single-color" data-color="#483063" data-index="6" style="background-color: #483063">
</li>
</ul>
注意:此脚本在桌面上不再有效。它仅适用于触摸设备。
关于javascript - touchstart 在一个元素上,拖动,touchend 在另一个元素上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38991158/
我目前正在我的设备 (Samsung galaxy S2) 上为我的游戏测试触摸启动功能。我在 android 中使用封装在 phonegap 下的 javascript 和 jquery 进行编程,
我用过这个link在我的项目中向左/向右写入的 stackoverflow 的内容,但现在我希望每次滑动 1 秒后处于非事件 touchstart 状态,并在 1 秒后 touchstart 处于事件
Angular 触控 ngTouch导致在触摸释放时发生点击。 有没有办法让点击发生在触摸开始? fast-click下面的指令似乎可以在触摸屏上执行我想要的操作,但它不适用于鼠标点击。 myApp.
如果您使用以下语法,一个简单的 touchstart 事件就可以工作: http://jsfiddle.net/rwdu4hb9/ $(function(){ $('.test').on('t
由于大多数桌面浏览器尚不支持 touchstart/touchend。如何创建与 mousedown 事件相同的 touchstart 事件(所有浏览器都支持)。 我想要这样的东西 $('obj').
我想在用户向下滚动移动设备页面时禁用 touchstart 事件。该页面有各种元素,当您单击时会切换一个类,但我希望当用户向下滑动以向下滚动页面时禁用这些 touchstart 事件。 JQUERY
所以我正在使用 JQuery (1.11.3),但我一直被困在网上找不到任何东西的东西上。 基本上,我将一个处理程序绑定(bind)到“touchstart”事件并想要检索触摸事件的位置。 (注意:我
我已将 touchstart 事件附加到网络应用程序中固定位置的页脚 所以结构是这样的: i am a looong content. i am tappable! 代码如下: $("#footer"
我倾向于制作一个输入字段和一个适用于移动浏览器的按钮。当我在字段中输入 123 并单击按钮时,它应该转到 http://example.com/123.html 然后我将这两个线程结合起来 24266
我将 Seadragon Ajax 与 jQuery 触摸事件监听器结合使用。 容器绑定(bind)了 touchstart、touchmove 和 touchend,这里是 touch start:
我已尝试在我的代码中进行滑动操作,但 touchstart 未初始化。我尝试在 stackoverflow 中搜索解决方案,但找不到任何解决方案。我是使用js的新手。这是链接: Sample wind
我正在将 Chrome 应用程序转换为 Electron 。该应用程序本身以全屏信息亭模式运行提供的 URL(带有一些其他配置选项)。我希望能够在 webview 的父元素上检测渲染器进程中的点击,但
今天突然之间,我开始在我们网站的每个页面上看到这个 Added non-passive event listener to a scroll-blocking 'touchstart' event.
我想阻止 touchStart 事件,以防止 Safari 在某些条件下在 iOS 设备中弹出。 为此,我使用以下方法: $('.wrapper').on('touchstart', function
我在页面上有一系列 div,您可以向左滑动,这将显示下面的 div。当只有一个元素时,这种方法效果很好,但当有多个元素时,它们都会一致滑动,而不是单独滑动一个。 为了解决这个问题,我尝试了这里的想法:
有与此类似的问题,但解决方案要么涉及另一个库,要么改用点击事件 - 我想知道没有库是否可行。 我在图像上使用 touchstart 事件来检测 1.5 秒的点击,然后重新加载所述图像。然而,在大多数移
我想在我的 li 上添加 touchstart 事件,而不禁用父级上的滚动。 目前,它有效。我在 timeline 上有滚动条,我可以点击 li。 当我添加touchstart时,我可以点击其中一个l
我在触摸启动后播放一些音频时遇到问题。我有以下在 Chrome 57 中运行的代码: Play Media on user touch Click me to play audio! d
更新:这个问题发生在动态创建的元素上我有一个页面,我在其中将 ajax 中的产品加载到网格中。每个产品都是一个 div,我希望可以单击它以将其信息添加到购物车。 使用 Jquery click 事件一
我正在寻找适用于 iOS 的解决方案,例如悬停在“桌面世界”中。我的页面上有很多图像项目,当用户在图像上移动手指时,实际图像的不透明度为 0。(因此一次移动会隐藏所有项目:) ) 我尝试过这样的事情:
我是一名优秀的程序员,十分优秀!