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

发布时间：2017-08-10, 10:39:43 分类：HTML | 编辑 off 网址 | 辅助

图集1/2

正文 443字数 1,961,966阅读

关于on点击事件在ios中失效的问题
IPhone中H5页面用on绑定click无效的解决方法
关于jquery中on绑定click事件在苹果手机失效的问题

如果不用必须用click，则换成touch自然不存在本文的bug。
当用如下方法绑定click事件时，

$(document).on('click','selector',function(){
});

Run code

Cut to clipboard

发现在PC各种浏览器，以及移动端模拟器上都是可以正常调试的，但是在ios的微信端访问或浏览器访问均有不同程度的无效情况，

解决办法如下：
第一种方法：解决的方法很巧妙，就是给需要绑定事件的元素添加一个css

cursor: pointer;

Run code

Cut to clipboard

。


selector {
cursor:pointer;
}

Run code

Cut to clipboard

第二种方法：把document换成selector的父元素，前提是父元素不是由JS生成的。

（支付宝）给作者钱财以资鼓励（微信）→

标签: on1 click3 事件20 移动端10 点击20 无效4 bug7

有过 13 条评论 »

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

修改输入框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;
}

Run code

Cut to clipboard

也可以给这个属性加字体

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;
}

Run code

Cut to clipboard

reply | quote | #¹⁰

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

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>

Run code

Cut to clipboard

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

<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>

Run code

Cut to clipboard

#,广西南宁市,2017-08-31,15:28:46,
option[text=5]这种？为什么我不行，而且网上也有一些说不行的。但是也有很多这样子写的，这到底是误导还是？

reply | quote | #¹¹

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

移动端，点击之后某个区域后有阴影
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>

Run code

Cut to clipboard

reply | quote | #¹²

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

芳芳造型

<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>

Run code

Cut to clipboard

#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>

Run code

Cut to clipboard

#,广西南宁市,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);
"

Run code

Cut to clipboard

#,广西南宁市,2017-09-29,10:40:35,
移动端:active伪类无效的解决方法
在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。

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

Run code

Cut to clipboard

#,广西南宁市,2017-09-29,10:40:55,@2,

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;  
}

Run code

Cut to clipboard

#,广西南宁市,2017-09-29,10:41:14, 移动网页active

reply | quote | #¹³

Records:13 2/2 «‹1 2 ›»

lizhenqiu blog

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

相关日志

有过 13 条评论 »

留下評論