anima-yocto-touch - npm Package Compare versions

Comparing version 1.0.0 to 1.0.10

HISTORY.md

@@ -5,4 +5,46 @@ # History
 
+## 1.0.10
+
++ 升级anima-yocto-core依赖到`1.1.1`
++ 升级anima-yocto-event依赖到`1.0.3`
+
+## 1.0.9
+
++ 修复手指按下后长时间停留之后tap不触发的问题
+
+
+## 1.0.8
+
++ 修复SVG元素的target指向错误的问题，详见：http://stackoverflow.com/questions/25404694/svg-relatedtarget-correspondinguseelement-is-undefined-in-ie/25522875#25522875
+
+## 1.0.7
+
++ 修复select元素绑定了tap或click事件后无法触发默认行为的bug
+
+## 1.0.6
+
++ 升级依赖包
+
+## 1.0.5
+
++ 修复兼容一个ios4引起的滚动bug
+
+## 1.0.3 && 1.0.4
+
++ 不再全局代理click事件，改为只有监听了tap或click事件的元素才会触发该逻辑
++ fix bug && optimize
+
+## 1.0.2
+
++ 提取手势管理模块（gestureManager.js）,解决多版本重复绑定的问题
++ fix bug && optimize
+
+## 1.0.1
+
++ 基于`fastclick.js`进行重构，去除一些不必要的兼容性代码
++ 事件触发顺序为touchstart,touchmove,touchend,tap,click
++ 重构新增手势API
+
 ## 1.0.0
 
 `new` It is the first version of anima-yocto-touch.

index.js

@@ -1,1 +0,9 @@
-require('./src/touch');
+var $ = Yocto = require('anima-yocto-core');
+
+require('anima-yocto-event');
+
+require('./src/gestureManager');
+
+require('./src/tap');
+
+module.exports = $;

package.json

 {
   "name": "anima-yocto-touch",
-  "version": "1.0.0",
+  "version": "1.0.10",
   "description": "the touch from yocto",
@@ -24,4 +24,4 @@ "keywords": [],
   "dependencies": {
-    "anima-yocto-core": "1.0.0",
-    "anima-yocto-event": "1.0.0"
+    "anima-yocto-core": "1.1.1",
+    "anima-yocto-event": "1.0.3"
   },
@@ -28,0 +28,0 @@ "devDependencies": {

README.md

@@ -5,17 +5,18 @@ # anima-yocto-touch [![spm version](http://spmjs.io/badge/anima-yocto-touch)](http://spmjs.io/package/anima-yocto-touch)
 
-An awesome spm package!
+## Yocto-touch
 
----
+新增模块，提供`tap`事件，用于解决移动端`click`事件300ms延迟以及点透等问题。
 
-## Install
+相比`Zepto`的`tap`事件，`Yocto`里面的`tap`事件会阻止原生的`click`事件防止点透的发生，同时会根据点击的元素去触发对应的默认事件，比如label，input等元素。
 
-```
-$ spm install anima-yocto-touch --save
-```
+用法和原生事件一样：
 
-## Usage
+````js
 
-```js
-var animaYoctoTouch = require('anima-yocto-touch');
-// use animaYoctoTouch
-```
+var $ = require(‘anima-yocto-touch’);
+
+$(‘body’).on(‘tap’, function(){});
+
+$(‘body’).tap(function(){});
+
+````

tests/anima-yocto-touch-spec.js

@@ -6,171 +6,60 @@ var expect = require('spm-expect.js');
 
-require('../index');
+require('../index')
 
-$('<style>.container{position:relative;}.tap{width:100px;height:100px;position:absolute;left:1;top:1;}.click{width:200px;height:200px;text-align:right;}.red{background:red;}.blue{background:blue;}.normaltap{width:100px;height:100px;}</style>').appendTo('head')
-
-$(  '<h1>点透测试</h1>'+
-    '<div class="container">' +
-    '<div class="tap red" id="J_tap">tap red</div>' +
-    '<div class="click blue" id="J_click">click blue</div>' +
-    '</div>' +
-    '<h1>tap测试</h1>'+
-    '<div class="container" style="width:200px;height:200px">' +
-    '<div id="JS_Normaltap" class="normaltap red" style="margin-top:20px;">normal tap</div>' +
+$(
+    '<p>点透测试</p>'+
+    '<div style="position: relative;">'+
+        '<div id="J_top" style="width:50px; height:50px; background-color: red; position: absolute; z-index: 1;"></div>'+
+        '<div id="J_bottom" style="width:100px; height:100px; background-color: blue; position: absolute;"></div>'+
     '</div>'+
-    '<h1>checkbox测试</h1>'+
-    '<div class="container" style="width:200px;height:200px">' +
-    '<input id="JS_checkbox" type="checkbox" name="checkboxTest" value="1" />' +
-    '<input type="checkbox" name="checkboxTest" value="2" />' +
-    '<input type="checkbox" name="checkboxTest" value="3">' +
-    '</div>'+
-    '<h1>冒泡测试</h1>'+
-    '<div id="J_parent" class="container" style="width:200px;height:200px">' +
-    '<div id="J_child" class="normaltap red" style="margin-top:20px;">child</div>' +
-    '</div>'+
-    '<h1>prevenDefault失效测试</h1>'+
-    '<div class="container" style="width:200px;height:200px">' +
-    '<div id="JS_prevenDefault" class="normaltap red" style="margin-top:20px;">normal tap</div>' +
-    '</div>'
-).prependTo('body');
+    '<br>'+
+    '<br>'+
+    '<br>'+
+    '<br>'
+).appendTo('body');
 
-$('' +
-    '<input type="tel" pattern="[0-9]*" id="applyAmt" placeholder="最高1,555,000.00的金额" value="" maxlength="10">' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<select onclick="alert(\'select 1\')" name="">' +
-    '<option value="1">等额本息6月</option>' +
-    '<option value="2">等额本金12个月</option>' +
-    '</select>' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<select onclick="alert(\'select 2\')">' +
-    '<option value="">不使用任何优惠</option>' +
-    '<option value="1">首贷有礼(仅限首次使用)</option>' +
-    '<option value="2">9.7折</option>' +
-    '<option value="3">8.8折</option>' +
-    '</select>' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<textarea>textarea</textarea>' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<input id="JS_TestText" type="text" value="text" />' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<input type="number" value="123" />' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<input type="date" value="" />' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<input type="time" value="" />' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<input id="JS_TestSubmit" type="submit" value="submit" />' +
-    '<input id="JS_TestButton" type="button" value="button" />' +
-    '<input type="button" disabled value="button disabled" onclick="alert(1)" />' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<label for="JS_test">labellabel:<br/><br/> <input id="JS_test" type="text" value="input" /></label>' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<label><input type="radio" name="radio1" value="xx" /> radio1</label>' +
-    '<label><input type="radio" name="radio1" value="xx" /> radio2</label>' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<div id="JS_Log">log区域</div>' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>'
-).prependTo('body')
+var i = 0;
 
-$('<a id="J_href" href="http://www.taobao.com">淘宝</a><br/><br/>').prependTo('body')
+$('#J_top').on('tap', function(){
+    $(this).hide();
+})
 
-$('<a id="J_hash" href="#test">hash跳转测试</a><br/><br/>').prependTo('body')
-$('<a id="J_first">first</a><br/><br/>').prependTo('body')
-$('<a id="J_second">second</a><br/><br/>').prependTo('body')
+$('#J_bottom').on('tap', function(){
+    $(this).html(i++);
+})
 
-$('<a style="display:block; width:100%; height: 2000px; background-color: red;" href="http://www.taobao.com">测试快速滑动的问题</a><br/><br/>').prependTo('body')
+$(
+    '<p>A标签测试</p>'+
+    '<div style="position: relative;">'+
+        '<p><a href="http://www.taobao.com">未监听click或tap事件</a></p>'+
+        '<p><a id="J_href_first" href="http://www.taobao.com">监听了tap事件</a></p>'+
+        '<p><a id="J_href_second" href="http://www.taobao.com">监听了click且preventDefault</a></p>'+
+        '<p><a id="J_href_third" href="http://www.taobao.com">监听了click未preventDefault</a></p>'+
+    '</div>'+
+    '<br>'+
+    '<br>'+
+    '<br>'+
+    '<br>'
+).appendTo('body');
 
-describe('anima-yocto-touch', function() {
+$('#J_href_first').on('tap', function(event){
+    alert('Tap: 模拟事件没有preventDefault');
+})
 
-    it('normal usage', function() {
-        $('#J_tap').tap(function(e) {
-            //alert('tap');
-            $(this).hide();
-            console.log(e.type)
-        })
-        var i = 0;
-        $('#J_click').click(function(e) {
-            //alert('点透了');
-            i++;
-            $(this).html('点击次数：' + i);
-        })
+$('#J_href_second').on('click', function(event){
+    alert('Click: 执行了preventDefault');
+    event.preventDefault();
+})
 
-        // $('#JS_Normaltap').tap(function(e) {
-        $('#JS_Normaltap').on('tap', function(e) {
-            console.log('tap')
-            if ($(this).css('background-color') == 'green') {
-                $(this).css('background-color', 'red');
-            } else {
-                $(this).css('background-color', 'green');
-            }
-        });
+$('#J_href_third').on('click', function(event){
+    alert('Click: 期望正常跳转');
+})
 
-        $('#J_child').tap(function(){
-            console.log('tap冒泡测试')
-        });
+describe('anima-yocto-touch', function() {
 
-        $('#J_parent').tap(function(){
-            console.log('正确冒泡')
-        });
+    it('normal usage', function() {
 
-        var n = 0;
-        $('#JS_TestSubmit').click(function(ev) {
-            n++;
-            $('#JS_Log').text(ev + n);
-            console.log(ev)
-        });
-        $('#JS_TestText').click(function(ev) {
-            n++;
-            $('#JS_Log').text(ev + n);
-            console.log(ev)
-        });
-        $('#JS_TestButton').click(function(ev) {
-            n++;
-            $('#JS_Log').text(ev + n);
-            console.log(ev)
-        });
-
-        $('#JS_test').focus(function(){
-            console.log('focus')
-        })
-
-        var l = 0;
-        $('#JS_checkbox').click(function(){
-            l ++;
-            $('#JS_Log').text(l);
-        });
-
-        var p = 0;
-        $('#JS_prevenDefault').click(function(){
-            $(this).html(p++);
-        });
-
     });
 
 });
+

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

22

increased by4.76%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

17843

decreased by-97.96%

Number of package files

7

decreased by-88.33%

Lines of code

355

decreased by-98.36%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedanima-yocto-core@1.1.1(transitive)

• + Addedanima-yocto-event@1.0.3(transitive)

• - Removedanima-yocto-core@1.0.0(transitive)

• - Removedanima-yocto-event@1.0.0(transitive)

• Updatedanima-yocto-core@1.1.1

• Updatedanima-yocto-event@1.0.3