Tag: 触摸

处理触摸设备和hover效果

我尝试删除或阻止触摸设备上的所有hover效果。 我尝试使用几个脚本,但它对我不起作用。 如何使用开发工具对其进行测试? 我尝试这样的脚本,但有一些错误。 无法读取null的属性’addEventListener’。 但它在这里工作codepen有错误导致dom树还没有加载吗? $(window).on(‘load’, function() { if (!(‘addEventListener’ in window)) { return; } var htmlElement = document.querySelector(‘html’); function touchStart() { htmlElement.classList.remove(‘hover-active’); htmlElement.removeEventListener(‘touchstart’, touchStart); } htmlElement.addEventListener(‘touchstart’, touchStart); }); 我也试试这个 if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){} 我也尝试使用modernizr,它只适用于html.touch和html.no-touch中的每个选择器 function is_touch_device() { return ‘ontouchstart’ in window // works on most browsers || navigator.maxTouchPoints; // works on IE10/11 and Surface […]

统一触摸和点击事件

我认为这个问题已被要求死亡,但我找不到任何好的东西。 我想要的是一组跨设备的统一事件。 我知道映射并不总是1比1,但只是涵盖基础知识的东西,如: 忽略/禁用触摸设备上的hover事件/样式 将touchstart映射到mousedown 同样地,对鼠标进行改进 点按即可点击 等等… 也许甚至触摸,按住1s,touchmove to dragstart … 我没有仔细考虑所有细节。 当然,设备特定事件(如在桌面上hover或在平板电脑上滑动)无法翻译,如果不受支持则应忽略。 有人知道会有这样做的图书馆。 最好是一个不可见的jQuery补丁。 谢谢。

jQuery UI可拖动分屏

我有一个在桌面上工作正常的分屏滑块但我需要jQuery UI才能在移动设备上工作。可拖动的事件让我来回拖动它但有时左边的图像从它的原始位置移动,或者完全消失。 关于如何处理这个的任何想法? 这是codepen 。 滑块错误在移动设备上更明显。 document.addEventListener(‘DOMContentLoaded’, function(){ let wrapper = document.getElementById(‘wrapper’); let topLayer = wrapper.querySelector(‘.top’); let handle = wrapper.querySelector(‘.handle’); let skew = 0; let delta = 0; if(wrapper.className.indexOf(‘skewed’) != -1){ skew = 1000; } wrapper.addEventListener(‘mousemove’, function(e){ delta = (e.clientX – window.innerWidth / 2) * 0.5; handle.style.left = e.clientX + delta + ‘px’; topLayer.style.width= e.clientX […]

链接包装" >

jQuery在页面上找到电话号码并用链接包装

这是一个类似的问题,对于这个从未得到回答的旧问题: 使用jquery在电话号码周围标记标签 我正在使用自定义CMS的现有网站制作一个简单的jQuery移动网站。 在CMS中,有些条目包含代码和文本 Department 1 – (555) 123-1234 Department 2 – (555) 123-4321 Department 3 – (555) 123-6789 我知道大多数手机浏览器会自动将电话号码转换为可点击的链接,这些链接可以启动拨打电话号码。 然而,并非所有人都这样做,我希望能够使用jQuery将上述内容转化为: Department 1 – (555) 123-1234 Department 2 – (555) 123-4321 Department 3 – (555) 123-6789 我理解产生这一步骤的步骤涉及使用RegEx来匹配电话号码模式。 有任何想法吗? 我觉得这对于很多人来说都是一个有用的插件。 UPDATE 以下是我尝试使用以下答案和评论: var regex = ((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}; var text = $(“body:first”).html(); text = text.replace(regex, “$1”); $(“body:first”).html(text); […]

jquery触摸在iframe上滑动

我正在尝试整理一个小应用程序,我可以在屏幕上的任何位置滑动。 在我想要将iframe添加到页面的某个部分之前,这一切都还可以。 我希望能够知道当人们在这个区域时滑动发生的时间。 这可能吗? 所以#box是可滑动区域的想法 this is some text 我已经整理了一个基本的jsfiddle,可能有助于表明我的意思 http://jsfiddle.net/dwhitmarsh/v42S9/

禁用向右滑动到Windows Phone上的上一页

我正在尝试使用http://wipetouch.codeplex.com/在Meteor应用程序上实现滑动以在Iron Router中的模板之间切换。 它在iOS和Android上运行得非常漂亮,但在Windows Phone上,操作系统的本机滑动手势(在浏览器中向右滑动会在历史记录中移动一页)会干扰用户的滑动操作。 有什么方法可以禁用它吗? 还有哪些其他平台具有类似的function,可以防止用户有效地在Web应用程序中滑动? 作为示例, 此应用程序还使用相同的库来实现滑动手势。 注意:在body标签上使用touch-action:none不起作用。

Jquery滑块范围在iPad上不起作用

下面是我的Jquery滑块范围(最小 – 最大)代码,拖动在台式计算机上工作正常,但是当我在iPad上测试它时,它不起作用。 有人可以帮我这个吗? 不幸的是我无法附加图片。 下面是滑块范围图, =====(>)=======(<)===== var maxValue,myRequest,isDown=false,setUrl; setUrl = “/search_type/filter.php”; $( “#slider-range” ).slider({ range: true, min: 0, max: 500, step:25, orientation: “horizontal”, values: [ 0,500 ], slide: function( event, ui ) { if(ui.values[1] === 500) { maxValue = 500+”+”; } else { maxValue = ui.values[1]; } $( “#priceRange” ).val( “£” + ui.values[ 0 […]

使用jQuery检测iPhone Swipe

我只是在寻找能够检测触摸设备上手指滑动的聆听者。 例如; if (swipe.direction == ‘left’ ) { function(); }

模拟touchstart和touchend事件?

我正在开发一个主要用于ipad的jquery组件。 所以无论如何都要在桌面上模拟’touchstart和’touchend’事件,而不是让设备本身来检查事件。

触摸事件两次射击

事件发生两次,移动设备/平板电脑出现问题。 当我单击以下function时,应该下拉的菜单将下拉,然后immediataly滑回。 这只是触控设备的问题。 $(document).on(“touchend click”, “.lines-button”, function(e){ e.stopImmediatePropagation(); if($(this).hasClass(“close”)){ $(this).removeClass(“close”); $(“.widget1x1Back”).next(“.actionsHolder3”).slideUp(“fast”, function() { $(this).remove(); }); }else{ var iconsList = $(this).closest(“.top1x1”).next(“.hdnActnLst”).find(“.iconsHolder3”).html(); $(this).closest(“.widget1x1”).append(iconsList); $(this).closest(“.widget1x1”).find(“.actionsHolder3”).hide(); $(this).closest(“.widget1x1”).find(“.actionsHolder3″).slideDown(700,”easeOutBack”); $(this).addClass(“close”); } }); 任何输入都会很棒,谢谢!!