anima-yocto-touch - npm Package Compare versions

Comparing version 1.0.6 to 1.0.8

HISTORY.md

@@ -5,17 +5,18 @@ # History
 
-## 1.0.0
+## 1.0.8
 
-`new` It is the first version of anima-yocto-touch.
++ 修复SVG元素的target指向错误的问题，详见：http://stackoverflow.com/questions/25404694/svg-relatedtarget-correspondinguseelement-is-undefined-in-ie/25522875#25522875
 
-## 1.0.1
+## 1.0.7
 
-+ 基于`fastclick.js`进行重构，去除一些不必要的兼容性代码
-+ 事件触发顺序为touchstart,touchmove,touchend,tap,click
-+ 重构新增手势API
++ 修复select元素绑定了tap或click事件后无法触发默认行为的bug
 
-## 1.0.2
+## 1.0.6
 
-+ 提取手势管理模块（gestureManager.js）,解决多版本重复绑定的问题
-+ fix bug && optimize
++ 升级依赖包
 
+## 1.0.5
+
++ 修复兼容一个ios4引起的滚动bug
+
 ## 1.0.3 && 1.0.4
@@ -26,8 +27,15 @@
 
-## 1.0.5
+## 1.0.2
 
-+ 修复兼容一个ios4引起的滚动bug
++ 提取手势管理模块（gestureManager.js）,解决多版本重复绑定的问题
++ fix bug && optimize
 
-## 1.0.5
+## 1.0.1
 
-+ 升级依赖包
++ 基于`fastclick.js`进行重构，去除一些不必要的兼容性代码
++ 事件触发顺序为touchstart,touchmove,touchend,tap,click
++ 重构新增手势API
+
+## 1.0.0
+
+`new` It is the first version of anima-yocto-touch.

package.json

 {
   "name": "anima-yocto-touch",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "the touch from yocto",
@@ -5,0 +5,0 @@ "keywords": [],

src/tap.js

@@ -149,2 +149,9 @@ var $ = Yocto = require('anima-yocto-core');
         return false;
+    },
+    fixTarget: function(target){
+        if (window.SVGElementInstance && (target instanceof SVGElementInstance)){
+          target = target.correspondingUseElement;
+        }
+
+        return target;
     }
@@ -164,3 +171,3 @@ };
 
-            targetElement = event.target;
+            targetElement = yoctoTouch.fixTarget(event.target);
             touch = event.targetTouches[0];
@@ -208,3 +215,3 @@
             // If the touch has moved, cancel the click tracking
-            if (yoctoTouch.targetElement !== event.target || yoctoTouch.touchHasMoved(event)) {
+            if (yoctoTouch.targetElement !== yoctoTouch.fixTarget(event.target) || yoctoTouch.touchHasMoved(event)) {
                 yoctoTouch.trackingClick = false;
@@ -258,17 +265,5 @@ yoctoTouch.targetElement = null;
 
-
                 yoctoTouch.focus(targetElement);
+                deviceIsAndroid && yoctoTouch.sendClick(targetElement, event);
 
-                // input类型元素阻止默认事件
-                event.preventDefault();
-
-                yoctoTouch.sendClick(targetElement, event);
-
-                // Select elements need the event to go through on iOS 4, otherwise the selector menu won't open.
-                // Also this breaks opening selects when VoiceOver is active on iOS6, iOS7 (and possibly others)
-                // if (!deviceIsIOS || targetTagName !== 'select') {
-                //     yoctoTouch.targetElement = null;
-                //     event.preventDefault();
-                // }
-
                 return false;
@@ -318,3 +313,2 @@ }
 
-
 module.exports = $;

tests/anima-yocto-touch-spec.js

@@ -8,118 +8,50 @@ var expect = require('spm-expect.js');
 
-$('<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>'+
-    '<div id="JS_log" class="normaltap red" style="position: fixed; top: 10px; left: 10px; background-color: gray;">log区域<p></p></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 id="J_select" name="">' +
-    '<option value="1">等额本息6月</option>' +
-    '<option value="2">等额本金12个月</option>' +
-    '</select>' +
-    '<br/>' +
-    '<br/>' +
-    '<br/>' +
-    '<select>' +
-    '<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/>' +
-    '<div id="JS_Log">默认行为元素</div>' +
-    '<input type="radio" />'+
-    '<br/>' +
-    '<a href="http://www.taobao.com">淘宝</a>' +
-    '<br/>' +
-    'checkbox' +
-    '<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')
+$('#J_bottom').on('tap', function(){
+    $(this).html(i++);
+})
 
-$('<a id="J_first">first</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');
 
-$('<a id="J_second">second</a><br/><br/>').prependTo('body')
+$('#J_href_first').on('tap', function(event){
+    alert('Tap: 模拟事件没有preventDefault');
+})
 
-$('<a id="J_initEvent" href="javascript:;">模拟事件测试</a><br/><br/>').prependTo('body')
+$('#J_href_second').on('click', function(event){
+    alert('Click: 执行了preventDefault');
+    event.preventDefault();
+})
 
-$('<a style="display:block; width:100%; height: 2000px; background-color: red;" href="http://www.taobao.com">测试快速滑动的问题</a><br/><br/>').prependTo('body')
+$('#J_href_third').on('click', function(event){
+    alert('Click: 期望正常跳转');
+})
 
@@ -129,78 +61,3 @@ describe('anima-yocto-touch', function() {
     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);
-        })
 
-        // $('#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_child').tap(function(){
-            console.log('tap冒泡测试')
-        });
-
-        $('#J_parent').tap(function(){
-            console.log('正确冒泡')
-        });
-
-        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').on('click', function(){
-            l ++;
-            $('#JS_Log').text(l);
-        }).on('click', function(){
-            $('#JS_log p').append('click')
-        });
-
-        var p = 0;
-        $('#JS_prevenDefault').click(function(){
-            $(this).html(p++);
-        });
-
-        $('#J_initEvent')
-            .tap(function(){
-                alert('tap')
-            })
-            .click(function(event){
-                alert('event.animaClick')
-            })
-
-        var ev = document.createEvent('HTMLEvents');
-        ev.initEvent('click', false, true);
-
-        $('#JS_checkbox').get(0).dispatchEvent(ev)
     });
@@ -207,0 +64,0 @@

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

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

Worsened metrics

Total package byte prevSize

17961

decreased by-21.32%

Lines of code

355

decreased by-27.7%

No dependency changes