Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

finger-touch

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

finger-touch - npm Package Compare versions

Comparing version
0.0.3
 to
0.0.4
+59
-22
index.html

@@ -8,22 +8,31 @@ <!DOCTYPE html>

<title>touch-finger</title>
<style>
body {
margin: 0;
padding: 0;
user-select: none;
-webket-user-select: none;
<script>
! function() {
var t = 100,
o = 750,
e = document.documentElement.clientWidth || window.innerWidth,
n = Math.max(Math.min(e, 480), 320),
h = 50;
320 >= n && (h = Math.floor(n / o * t * .99)), n > 320 && 362 >= n && (h = Math.floor(n / o * t * 1)), n > 362 && 375 >= n && (h = Math.floor(n / o * t * 1)), n > 375 && (h = Math.floor(n / o * t * .97)), document.querySelector("html").style.fontSize =
h + "px"
}();
function rem() {
var t = 100,
o = 750,
e = document.documentElement.clientWidth || window.innerWidth,
n = Math.max(Math.min(e, 480), 320),
h = 50;
320 >= n && (h = Math.floor(n / o * t * .99)), n > 320 && 362 >= n && (h = Math.floor(n / o * t * 1)), n > 362 && 375 >= n && (h = Math.floor(n / o * t * 1)), n > 375 && (h = Math.floor(n / o * t * .97)), document.querySelector("html").style.fontSize =
h + "px"
};
rem();
window.onresize = function() {
rem();
}
</script>
<link rel='stylesheet' href='https://mjs.sinaimg.cn/wap/project/homev8/8.0.51/homev8/homev8.min.css'>
div {
background-color: rgba(0, 0, 0, 0.25);
height: 300px;
margin: 20px 0;
text-align: center;
font-size: 30px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>

@@ -33,9 +42,37 @@

<body>
<section class="s_card" id="j_card_yaowen" data-sudaclick="ls_c_yaowen">
<div class="guanggao1" data-name="第1个">
<a class="show m_f_a " href="https://sina.cn/" data-info="ad_none|-3|5|0|43|none|1503036568|0|-3|0|0|PDPS000000057683|3|211">
<h3 class="cm_tit">两指双击</h3>
<aside class="i_gx3_img_box">
<figure class="i_gx3_img_div i_gx3_img_div_solo"><img class="img_width finpic" src="https://d7.sinaimg.cn/pfpghc2/201708/17/70c155f3cf8d45ab9170bf642c1550a4.jpg" alt="还在玩假三国么，90后已集体沦陷此游戏"></figure>
</aside>
<blockquote class="cm_f_ic"><mark class="cm_mark">广告</mark><em class="m_f_con_n fr">2.8万<span class="m_f_con_ic icon_com"></span></em></blockquote>
</a>
</div>
<div class="guanggao2" data-name="第2个"><a class="m_f_a show " href="https://sina.cn/"><h3 class="cm_tit">两指三击</h3><aside class="i_gx3_img_box"><figure class="i_gx3_img_div"><img class="img_width finpic" src="https://d1.sinaimg.cn/pfpghc2/201708/18/598d15ccae1d4a5e8003c7fd39e73d42.jpg" alt="假如你在三国，诸葛亮的阵法你能破几个"></figure><figure class="i_gx3_img_div"><img class="img_width finpic" src="https://d6.sinaimg.cn/pfpghc2/201708/18/798a5d6e38074e1a8890e858f9d804ec.jpg" alt="假如你在三国，诸葛亮的阵法你能破几个"></figure><figure class="i_gx3_img_div"><img class="img_width finpic" src="https://d1.sinaimg.cn/pfpghc2/201708/18/2183da5bf6994325aa4ed27f035048e2.jpg" alt="假如你在三国，诸葛亮的阵法你能破几个"></figure></aside><blockquote class="cm_f_ic"><mark class="cm_mark">广告</mark><em class="m_f_con_n fr">7019<span class="m_f_con_ic icon_com"></span></em></blockquote></a></div>
<div class="guanggao3" data-name="第3个">
<a class="show m_f_a " href="https://sina.cn/" data-info="ad_none|-3|5|0|43|none|1503036568|0|-3|0|0|PDPS000000057683|3|211">
<h3 class="cm_tit">三指双击</h3>
<aside class="i_gx3_img_box">
<figure class="i_gx3_img_div i_gx3_img_div_solo"><img class="img_width finpic" src="https://d7.sinaimg.cn/pfpghc2/201708/17/70c155f3cf8d45ab9170bf642c1550a4.jpg" alt="还在玩假三国么，90后已集体沦陷此游戏"></figure>
</aside>
<blockquote class="cm_f_ic"><mark class="cm_mark">广告</mark><em class="m_f_con_n fr">2.8万<span class="m_f_con_ic icon_com"></span></em></blockquote>
</a>
</div>
<div class="guanggao4" data-name="第4个">
<a class="show m_f_a " href="https://sina.cn/" data-info="ad_none|-3|5|0|43|none|1503036568|0|-3|0|0|PDPS000000057683|3|211">
<h3 class="cm_tit">四指双击</h3>
<aside class="i_gx3_img_box">
<figure class="i_gx3_img_div i_gx3_img_div_solo"><img style="height:400px;" class="img_width finpic" src="https://d7.sinaimg.cn/pfpghc2/201708/17/70c155f3cf8d45ab9170bf642c1550a4.jpg" alt="还在玩假三国么，90后已集体沦陷此游戏"></figure>
</aside>
<blockquote class="cm_f_ic"><mark class="cm_mark">广告</mark><em class="m_f_con_n fr">2.8万<span class="m_f_con_ic icon_com"></span></em></blockquote>
</a>
</div>
<section class="s_card_it"><a href="http://news.sina.cn/?vt=4&amp;pos=108" data-sudaclick="card_more_yaowen"></a></section>
</section>
<div id="a1">两指三击</div>
<div id="a2">三指两击</div>
<!-- <script src="http://mjs.sinaimg.cn/wap/module/base/js/zepto.min.js"></script> -->
</body>
</html>
+1
-4
package.json
{
"name": "finger-touch",
"version": "0.0.3",
"version": "0.0.4",
"description": "手势库",

@@ -24,5 +24,2 @@ "author": "BraisedCakes666 <1930003003@qq.com>",

},
"dependencies": {
"vue": "^2.3.3"
},
"devDependencies": {

@@ -29,0 +26,0 @@ "art-template": "^4.12.1",

+0
-2
README.md

@@ -5,4 +5,2 @@ # finger-touch

某些浏览器兼容性不太好， 尽量只设置两个手指头
## Install

@@ -9,0 +7,0 @@ 

+18
-6
src/main.js
import touch from './touch.js'
touch(document.querySelector('#a1'), {
touch('.guanggao1', {
finger: 2,
number: 3
number: 2,
}, function(dom) {
alert('第一个dom');
alert(dom.getAttribute('data-name'))
})
touch(document.querySelector('#a2'), {
touch('.guanggao2', {
finger: 2,
number: 3,
}, function(dom) {
alert(dom.getAttribute('data-name'))
})
touch('.guanggao3', {
finger: 3,
number: 2
number: 2,
}, function(dom) {
alert('第二个dom');
alert(dom.getAttribute('data-name'))
})
touch('.guanggao4', {
finger: 4,
number: 2,
}, function(dom) {
alert(dom.getAttribute('data-name'))
})
+48
-12
src/touch.js

@@ -5,3 +5,3 @@ function getDom(el, dom) {

if (/#/.test(el)) {
if (dom.getAttribute('id') == el.replace(/#/, function() { return '' })) {
if (dom.getAttribute && dom.getAttribute('id') === el.replace(/#/, function() { return '' })) {
return dom;

@@ -14,3 +14,3 @@ }

} else {
if (dom.nodeName.toLowerCase() == el) {
if (dom.nodeName && dom.nodeName.toLowerCase() == el) {
return dom;

@@ -23,3 +23,3 @@ }

}
for (var i = 0; i < el.length; i++) {
for (let i = 0; i < el.length; i++) {
if (el[i] == dom) {

@@ -32,23 +32,59 @@ return el[i]

}
return false;
};
function lengthTo0() {
timelist.length = 0;
fingerList.length = 0;
}
export default function(el, { finger = 2, number = 2, timer = 500 }, cb) {
var timelist = [];
var index1 = 0;
var fingerList = [];
var timeouttimer = {};
const minTimer = 60;
document.addEventListener('touchstart', function(ev) {
var dom = getDom(el, ev.target);
let dom = getDom(el, ev.target);
if (dom) {
var time = new Date().getTime();
timelist.push({
time: time,
dom: dom
});
if (ev.touches.length == finger) {
dom.fingerList = dom.fingerList || [];
dom.fingerList.push(new Date().getTime());
var list = dom.fingerList;
for (var i = 1; i < number; i++) {
if (list[list.length - i] - list[list.length - i - 1] < timer) {} else {
ev.preventDefault();
return false;
for (var i = 1; i < finger; i++) {
if (timelist[timelist.length - i].time - timelist[timelist.length - i - 1].time < minTimer) {
for (var attr in timeouttimer) {
clearTimeout(timeouttimer[attr])
}
break;
}
}
cb && cb(dom);
for (var i = 1; i < finger; i++) {
if (timelist[timelist.length - i].dom != timelist[timelist.length - i - 1].dom) {
for (var attr in timeouttimer) {
clearTimeout(timeouttimer[attr])
}
lengthTo0()
break;
}
}
timeouttimer[index1++] = setTimeout(function() {
fingerList.push(time);
for (var i = 1; i < number; i++) {
if (fingerList[fingerList.length - i] - fingerList[fingerList.length - i - 1] < timer) {} else {
ev.preventDefault();
return false;
}
}
cb && cb(dom)
}, minTimer);
ev.preventDefault();
return false;
}
} else {
lengthTo0()
}
});
}