on click事件在移动端点击无效bug

广西南宁市 2017-08-10 10:41

<style>
    .next_button{
        cursor:pointer
    }
</style>
<div class="button">
    <div class=" next_button button_left btn_red" style="width: 345px;">
    下一步
    </div>
</div>
<script>
$(document).on("click",".next_button",function(){
    alert();
});
</script>

广西南宁市2017-08-10 10:42:41

正解，其实安卓和ios里面还有些不兼容的状态
使用苹果手机访问的时候，发现了一个坑爹的问题，如论如何点击“下一步”，都没有任何反应，可是在安卓和各种模拟器中一切正常。后来经过查找资料才知道，苹果有这么个设置：
对于点击的对象，拥有cursor:pointer这个样式的设置，也就是说，鼠标放上去，能够出现“手”型的图标才被认作可以使用点击事件，

广西南宁市2017-08-10 10:46:31

动态生成元素的点击事件

$(document).on("click",function(){})

在andriod设备和电脑浏览器模拟上可以触发，而在apple移动设备上却无法触发。

试过很多办法，在元素生成后再绑定事件，把click改成touch事件，都没有用，最后好不容易百度到了解决办法
解决的方法很巧妙，就是给需要绑定事件的元素添加一个css

cursor: pointer

selector {
  cursor:pointer
}

#⁰

广西南宁市 2017-08-10 10:43

将click换成touchstart（在移动端基本都用吧）

 <script>
    $(document).on("touchstart",function(){console.log(‘22222‘)})
 </script>

#⁰

广西南宁市 2017-08-10 10:44

<script>
   $(selector).click(function(){console.log(‘1111‘)})
</script>

#⁰

广西南宁市 2017-08-10 10:49

jquery click事件如何在移动端自动转换成touchstart事件。
因为移动端click事件会比touchstart事件慢几拍
移动设备某个元素上事件执行顺序是：

touchstart
touchmove
touchend
click｛mousedown->mousemove->mouseup｝

click事件在移动设备上虽然会识别但却是最后一个执行的，所以如果不把click事件换成touchstart事件的话，就可能造成延时导致交互上也慢了几拍
所以在移动端最好把click事件换成touchstart事件。
那么如何添加事件比较简单呢.
于是乎有了以下这种写法：

var handle = function (e) {
　　e.preventDefault(); // 阻止浏览器默认行为
　　alert('fuck world');
}
$('body').on(‘touchstart mousedown’,  handle );

这样在pc端浏览器上面alert只执行一次，触发的事件是mousedown
在ios设备safari浏览器上面alert也只执行一次，触发的事件是touchstart

为什么只执行一次？
秘密在于当执行的是touchstart后，preventDefault掉了后面的click就不执行了，“非常完美”.
^_^! 一如既往的android设备蛋疼是必须的，测试发现除qq浏览器外其它浏览器都会alert两次
也就是说touchstart和mousedown的handle函数都执行了，似乎是e.preventDefault()没有起作用。具体原因不明...

因为要兼容，所以就没办法了只能通过判断是否支持touch事件来分别添加事件了..
那就扩展一个jquery方法插件吧仿一个on方法的插件方法比如名称为quickOn，

;(function(){
        var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click';
    　　if(!$.fn.quickOn){
            $.fn.quickOn= function(){
                arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0];
                return $.fn.on.apply(this, arguments);    
            };
        }
　　})();

quickOn虽然名字尴尬了一点，但是能用，例如：

$('body').quickOn('click', function(){
    alert('fuck world') ;
})

额。。后来想想，为什么不直接重载jquery的on方法呢？？
来吧，试试

;(function(){
        var isTouch = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click', _on = $.fn.on;
            $.fn.on = function(){
                arguments[0] = (arguments[0] === 'click') ? isTouch: arguments[0];
                return _on.apply(this, arguments); 
            };
    })();

这样暴力的来那么一下后，mmm....，on方法还是原来的用法，但如果你on的是click事件，那么在移动平台上会被替换成touchstart以迅速响应操作。

广西南宁市2017-08-10 10:49:52

弊端太大，比如说，如果是a标签新打开一个页面的话，会直接打开两个

广西南宁市2017-08-10 11:07:20

要想用JS模拟点击A标签事件，就得先往A标签中的文字添加能被JS捕获的元素，然后再用JS模拟点击该元素即可。

广西南宁市2017-08-10 11:08:43

在有用到滚动touch相关的事件里阻止了默认行为时，对DIV的点击绑定失效时，
将其转成A标签即可。

广西南宁市2017-08-10 11:09:13

$('.class').on("click",function(){……});相当于$('.class').bind("click",function(){……});
$(document).on("click",'.class',function(){……});相当于$('.class').live("click",function(){……});
js生成的元素绑定事件必须使用live，但新版的jq，已经淘汰了live，可以用on方法代替，但必须注意写法。

#⁰

广西南宁市 2017-08-24 16:45

js 重写alert 兼容iphone使得alert 不带src

<script>
window.alert = function(name){
var iframe = document.createElement("IFRAME");
iframe.style.display="none";
iframe.setAttribute("src", 'data:text/plain,');
document.documentElement.appendChild(iframe);
window.frames[0].window.alert(name);
iframe.parentNode.removeChild(iframe);
}
</script>

广西南宁市2017-08-24 17:44:44

重写alert方法，去掉地址显示

//重写alert方法，去掉地址显示
window.alert = function(name){
var iframe = document.createElement("IFRAME");
iframe.style.display="none";
iframe.setAttribute("src", 'data:text/plain,');
document.documentElement.appendChild(iframe);
window.frames[0].window.alert(name);
iframe.parentNode.removeChild(iframe);
}

//重写confirm方法，去掉地址显示
window.confirm = function(name){
var iframe = document.createElement("IFRAME");
iframe.style.display="none";
iframe.setAttribute("src", 'data:text/plain,');
document.documentElement.appendChild(iframe);
var result = window.frames[0].window.confirm(name);
iframe.parentNode.removeChild(iframe);
return result;
}

广西南宁市2017-08-24 18:47:39

ios移动端(H5)alert/confirm提示信息去除网址(URL)

在android中 有问题，过滤android

var browser={
    versions:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
        return {
            trident: u.indexOf('Trident') > -1, //IE内核
            presto: u.indexOf('Presto') > -1, //opera内核
            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
            iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
        };
    }(),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
}

if(browser.versions.ios){
    window.alert = function(name){
        var iframe = document.createElement("IFRAME");
        iframe.style.display="none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
    };

    window.confirm = function (message) {
        var iframe = document.createElement("IFRAME");
        iframe.style.display = "none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        var alertFrame = window.frames[0];
        var result = alertFrame.window.confirm(message);
        iframe.parentNode.removeChild(iframe);
        return result;
    };
}

<script>
	window.alert = function(name){
	 var iframe = document.createElement("IFRAME");
	iframe.style.display="none";
	iframe.setAttribute("src", 'data:text/plain,');
	document.documentElement.appendChild(iframe);
	window.frames[0].window.alert(name);
	iframe.parentNode.removeChild(iframe);
	}


    window.confirm = function (message) {
        var iframe = document.createElement("IFRAME");
        iframe.style.display = "none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        var alertFrame = window.frames[0];
        var result = alertFrame.window.confirm(message);
        iframe.parentNode.removeChild(iframe);
        return result;
    };
</script>

#⁰

广西南宁市 2017-08-26 17:45

手机端html5触屏事件(touch事件)

touchstart：触摸开始的时候触发
touchmove：手指在屏幕上滑动的时候触发
touchend：触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：

touches：当前位于屏幕上的所有手指的列表。
targetTouches：位于当前DOM元素上手指的列表。
changedTouches：涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息（常用）：

identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。一般为从0开始的流水号（android4.1，uc）
target：DOM元素，是动作所针对的目标。
pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。　
radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。

初步测试浏览器不支持，好在功能不常用，欢迎大家反馈。

var obj = document.getElementByIdx_x('id');
obj.addEventListener('touchmove', function(event) {
     // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) {
　　　　 event.preventDefault();// 阻止浏览器默认事件，重要 
        var touch = event.targetTouches[0];
        // 把元素放在手指所在的位置
        obj.style.left = touch.pageX-50 + 'px';
        obj.style.top = touch.pageY-50 + 'px';
        }
}, false);

#⁰

置顶 广西南宁市 2017-08-31 15:00

点击出现黑色背景的解决：-webkit-tap-highlight-color:rgba(0,0,0,0)
在手机上（iphone）点击按钮的时候，屏幕总会闪动一下，这让页面看起来很不友好也不流畅。解决方案加了一句css就解决了：

-webkit-tap-highlight-color:rgba(0,0,0,0)

//webkit是苹果浏览器引擎，tap点击，highlight背景高亮，color颜色，颜色用数值调节。
原因如下：
在移动端上，有事件监听的元素被点击的时候会被高亮显示，而-webkit-tap-highlight-color属性会在当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。
该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。

a{-webkit-tap-highlight-color:rgba(255,0,0,0);outline:none;}

ios微信点击超链接，去掉半透明黑色框效果
iOS微信点击超链接或是图片超链接，总是弹出一层黑色遮罩层，在a标签上添加style='-webkit-tap-highlight-color:rgba(255,0,0,0);'即可

#⁰

广西南宁市 2017-08-31 15:07

会使得ios苹果手机iphone输入框获取焦点失效？不定位弹出输入框？😬

#⁰

广西南宁市 2017-08-31 15:26

jquery去掉onclick事件

删除onclick属性：$(“a”).removeAttr(“onclick”);
设置onclick属性：$(“a”).attr(“onclick”,”test();”);

#⁰

广西南宁市 2017-08-31 15:27

修改输入框placeholder文字默认颜色-webkit-input-placeholder

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000; opacity:1; 
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000;opacity:1;
}

input:-ms-input-placeholder{
    color: #000;opacity:1;
}

input::-webkit-input-placeholder{
    color: #000;opacity:1;
}

也可以给这个属性加字体

input::-webkit-input-placeholder { /* WebKit browsers*/ 
　　color:#999;font-size:14px;
　　}
input:-moz-placeholder {  /* Mozilla Firefox 4 to 18*/ 
　　color:#999;font-size:14px;
　　}
input::-moz-placeholder {  /* Mozilla Firefox 19+*/ 
　　color:#999;font-size:14px;
　　}
input:-ms-input-placeholder { /* Internet Explorer 10+*/ 
　　color:#999;font-size:14px;
}

#⁰

广西南宁市 2017-08-31 15:28

JQuery 对 Select option 的操作
下拉框：

<select id="selectID" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>

下面是对下拉框的基本操作：

<script language="javascript">
        $(document).ready(function() {
        //绑定下拉框change事件，当下来框改变时调用 SelectChange()方法
        $("#selectID").change(function() { SelectChange(); }); 
        })
        function SelectChange() {
        //获取下拉框选中项的text属性值
        var selectText = $("#selectID").find("option:selected").text();
        alert(selectText);
        //获取下拉框选中项的value属性值
        var selectValue = $("#selectID").val();
        alert(selectValue);
        //获取下拉框选中项的index属性值
        var selectIndex = $("#selectID").get(0).selectedIndex;
        alert(selectIndex);
        ////获取下拉框最大的index属性值
        var selectMaxIndex = $("#selectID option:last").attr("index");
        alert(selectMaxIndex);
    }

    function aa() {
        //设置下拉框index属性为5的选项 选中
        $("#selectID").get(0).selectedIndex = 5;  
    }
    function bb() {
        //设置下拉框value属性为4的选项 选中
        $("#selectID").val(4);
    }
    function cc() {
        //设置下拉框text属性为5的选项 选中
         $("#selectID option[text=5]").attr("selected", "selected");

         $("#yyt option:contains('5')").attr("selected", true);
    }
    function dd() {
        //在下拉框最后添加一个选项
        $("#selectID").append("<option value='7'>7</option>");
    }
    function ee() {
        //在下拉框最前添加一个选项
        $("#selectID").prepend("<option value='0'>0</option>")
    }
    function ff() {
        //移除下拉框最后一个选项
        $("#selectID option:last").remove();
    }

    function gg() {
        //移除下拉框 index属性为1的选项
        $("#selectID option[index=1]").remove();
    }

    function hh() {
        //移除下拉框 value属性为4的选项
        $("#selectID option[value=4]").remove();
    }
    function ii() {
        //移除下拉框 text属性为5的选项
        $("#selectID option[text=5]").remove();
    }    
    </script>

广西南宁市2017-08-31 15:28:46

option[text=5]这种？为什么我不行，而且网上也有一些说不行的。但是也有很多这样子写的，这到底是误导还是？

#⁰

广西南宁市 2017-09-29 10:36

移动端，点击之后某个区域后有阴影
html点击有阴影
去掉点击后面阴影区域方块决解方法css

今天偶然发现一件很奇怪的事儿。
在移动端，在我去掉css的伪类及其伪元素跟相关的js之后，
在我点击某块区域的时候，总有一个背景盖在上面，当初以为是Js搞得鬼，
后来发现却不以为然，原来是css的一个属性搞得鬼，希望可以帮到大家。

问题1：
如图所示，我所遇到的状况：

问题2：去掉点击区域的边框阴影效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <style type="text/css">


            div {
                /*关键代码*/
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }

            .btn-blue {
                display: block;
                height: 42px;
                line-height: 42px;
                text-align: center;
                border-radius: 4px;
                font-size: 18px;
                color: #FFFFFF;
                background-color: blue;
            }

            .btn-blue-on {
                background-color: red;
            }
        </style>
    </head>

    <body>

        <div class="btn-blue">按钮</div>

        <script type="text/javascript">
            var btnBlue = document.querySelector(".btn-blue");
            btnBlue.ontouchstart = function() {
                this.className = "btn-blue btn-blue-on"
            }
            btnBlue.ontouchend = function() {
                this.className = "btn-blue"
            }

            btnBlue.onclick = function(){
                alert(123)
            }
        </script>
    </body>

</html>

#⁰

广西南宁市 2017-09-29 10:37

芳芳造型

<style>
/*利用:after伪元素*/  
.clearUl:after {  
content:"";
display: block;  
clear: both;  
}
#ffmmright li a:active:before {
    content: '[ ';
	
}#ffmmright li a:active:after {
    content: ' ]';
}#ffmmright li a:active{font-size: 18px;}
</style>

<script>
	window.alert = function(name){
	 var iframe = document.createElement("IFRAME");
	iframe.style.display="none";
	iframe.setAttribute("src", 'data:text/plain,');
	document.documentElement.appendChild(iframe);
	window.frames[0].window.alert(name);
	iframe.parentNode.removeChild(iframe);
	}
//重写confirm方法，去掉地址显示
window.confirm = function(name){
var iframe = document.createElement("IFRAME");
iframe.style.display="none";
iframe.setAttribute("src", 'data:text/plain,');
document.documentElement.appendChild(iframe);
var result = window.frames[0].window.confirm(name);
iframe.parentNode.removeChild(iframe);
return result;
}
	var ua = navigator.userAgent.toLowerCase();
	var isWeixin = ua.indexOf('micromessenger') != -1;
	var isAndroid = ua.indexOf('android') != -1;
	var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
	/*if (isWeixin) {
		alert('微信来源');
	}else{
		alert('非微信来源');
	}*/
window.onload=function(){
	document.body.addEventListener('touchstart', function () { 
		//...空函数即可
	});
}

	
</script>

#2173,移动端，点击之后某个区域后有阴影
html点击有阴影
去掉点击后面阴影区域方块决解方法css

今天偶然发现一件很奇怪的事儿。
在移动端，在我去掉css的伪类及其伪元素跟相关的js之后，
在我点击某块区域的时候，总有一个背景盖在上面，当初以为是Js搞得鬼，
后来发现却不以为然，原来是css的一个属性搞得鬼，希望可以帮到大家。

问题1：
如图所示，我所遇到的状况：

问题2：去掉点击区域的边框阴影效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <style type="text/css">


            div {
                /*关键代码*/
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }

            .btn-blue {
                display: block;
                height: 42px;
                line-height: 42px;
                text-align: center;
                border-radius: 4px;
                font-size: 18px;
                color: #FFFFFF;
                background-color: blue;
            }

            .btn-blue-on {
                background-color: red;
            }
        </style>
    </head>

    <body>

        <div class="btn-blue">按钮</div>

        <script type="text/javascript">
            var btnBlue = document.querySelector(".btn-blue");
            btnBlue.ontouchstart = function() {
                this.className = "btn-blue btn-blue-on"
            }
            btnBlue.ontouchend = function() {
                this.className = "btn-blue"
            }

            btnBlue.onclick = function(){
                alert(123)
            }
        </script>
    </body>

</html>

广西南宁市2017-09-29 10:38:40

style="
        color: #000000;
    cursor: pointer;
    right: 28px;
    position: absolute;
    top: 0px;
    display: inline-block;outline :none;-webkit-appearance:none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
"

广西南宁市2017-09-29 10:40:35

移动端:active伪类无效的解决方法
在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。

window.onload=function(){
    document.body.addEventListener('touchstart', function () { 
        //...空函数即可
    });
}

广西南宁市2017-09-29 10:40:55

#²

a:link { /* Essentially means a[href], or that the link actually goes somewhere */  
  color: blue;  
}  
a:visited {  
  color: purple;  
}  
a:hover {  
  color: green;  
}  
a:active {  
  color: red;  
}

广西南宁市2017-09-29 10:41:14

移动网页active

#⁰