精华内容
下载资源
问答
  • html js iOS的冒泡,如果一直没有handler来处理事件,则只会冒泡到body的内层,而不会冒泡到body上。因此,只好了个children()这么干了:

    html

    <body>
    
        <div class="contentup">
            <ui-view></ui-view>
        </div>
    </body>


    js

    $("body").children().on("click",function() {
        alert("12")
    })


    iOS的冒泡,如果一直没有handler来处理事件,则只会冒泡到body的内层,而不会冒泡到body上。因此,只好加了个children()这么干了:

    展开全文
  • 今天在移动端开发的过程中,遇到了一个很常见的bug,需求是点击按钮展开菜单内容,再次点击或者点击任意其他内容收进原来样子,在pc,安卓可以正常使用,但是在ios端点击body不生效,在网上也搜集了一些大家的解决...

    今天在移动端开发的过程中,遇到了一个很常见的bug,需求是点击按钮展开菜单内容,再次点击或者点击任意其他内容收进原来样子,在pc,安卓可以正常使用,但是在ios端点击body不生效,在网上也搜集了一些大家的解决方法。

    首先看下小例子:


    这个例子中在正常的pc和安卓显示中可以实现,但是在ios中显示有问题,因为IOS浏览器的window、document、body并不接受click事件,按钮和链接才接受click事件。

    有网友说直接给body加cursor:pointer;属性,经过尝试好像并不行。当然换个思路想,可以给整屛加个遮罩层,点击遮罩层来实现,这个是可以的,这里不做深究。

    最终在多次尝试下,找到比较实用的方法;


    这个方法很适用,而且不难理解,主要是事件绑定和阻止冒泡。

    展开全文
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...React 在body上绑定事件以及阻止事件冒泡&lt;/title&gt; &lt;script src="https://unpkg.com/react@16/u
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8" />
        <title>React 在body上绑定事件以及阻止事件冒泡</title>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        <style>
            html{height: 100%;}
            body{height: 100%;background-color: rgba(0,0,0,0.2);}
            .m-outer{background-color: red;}
        </style>
    </head>
    
    <body>
        <div id="root"></div>
        <script type="text/babel">
            class Toggle extends React.Component {
            constructor(props) {
              super(props);
              this.state = {isToggleOn: true};
     
              // 这个绑定是必要的,使`this`在回调中起作用
              this.handleClick = this.handleClick.bind(this);
            }
    
            componentDidMount() { 
                document.body.addEventListener('click', e => { 
                    if (e.target && e.target.matches('#m-btn')) { 
                        return; 
                    }             
                    console.log('body');
                });             
            } 
    
            componentWillUnmount() { 
                document.body.removeEventListener('click');
            }                
    
            handleClick() {
              this.setState(prevState => ({
                isToggleOn: !prevState.isToggleOn
              }));
            }
     
            render() {
              return (
                  <button onClick={this.handleClick} id="m-btn">
                    {this.state.isToggleOn ? 'ON' : 'OFF'}
                  </button>
              );
            }
          }
     
          ReactDOM.render(
            <Toggle />,
            document.getElementById('root')
          );
        </script>
    </body>
    
    </html>

     

    展开全文
  • 里面很重要的一句是:triggerEvent: true //开启雷达图的边角名称可点击 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style=...

     看图:

     

     源码:

     里面很重要的一句是: triggerEvent: true //开启雷达图的边角名称可点击

    <!DOCTYPE html>
    <html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
    
        option = null;
        option = {
            title: {
                text: '专业雷达图'
            },
            tooltip: {},
            color: ['#C44003', '#7db800', '#00b3be', '#004BBF'],//雷达图中的各方向的线的颜色
            legend: {
                orient: 'vertical',     // 布局方式,默认为水平布局,可选为: 'horizontal' ¦ 'vertical'
                x: 'left',              // 水平安放位置,默认为全图居中,可选为: 'center' ¦ 'left' ¦ 'right'  ¦ {number}(x坐标,单位px)
                y: 'top',               // 垂直安放位置,默认为全图顶端,可选为: 'top' ¦ 'bottom' ¦ 'center' ¦ {number}(y坐标,单位px)
                data: ['国家级', '省级', '院级', '本专业'],
                top: 30,				//距离上面的名称的距离
                itemWidth: 20,			//图示的宽度
                itemHeight: 10,			//图示的高度
                itemGap: 10,			//图示之间的行间距
            },
            radar: {
                // shape: 'circle',
                name: {
                    textStyle: {
                        color: '#fff',
                        backgroundColor: '#00B3BF',
                        borderRadius: 3,
                        padding: [3, 7],
                    }
                },
                indicator: [
                    {name: '师资队伍', max: 6500},
                    {name: '教育教学', max: 16000},
                    {name: '实践教学条件', max: 30000},
                    {name: '社会服务', max: 38000},
                    {name: '人才培养效果', max: 52000}
                ],
                triggerEvent: true //开启雷达图的边角名称可点击
            },
            series: [{
                name: '专业画像',
                type: 'radar',
                // areaStyle: {normal: {}},
                data: [
                    {
                        value: [4300, 1000, 28000, 35000, 50000, 19000],
                        name: '国家级'
                    },
                    {
                        value: [5000, 14000, 28000, 3100, 42000, 21000],
                        name: '省级'
                    },
                    {
                        value: [5100, 1400, 12501, 3100, 42001, 2100],
                        name: '院级'
                    },
                    {
                        value: [2100, 4400, 1501, 9100, 2001, 2900],
                        name: '本专业'
                    }
                ]
            }]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    
        // myCharts是整个echars的dom对象
        myChart.on('click', function (params) {
            console.log(params)
            if (params.name == "师资队伍") {
                alert("您选中了 师资队伍")
            }
            alert(params.name);
        })
    
    </script>
    </body>
    </html>

     

     

     

    展开全文
  • 百度地图聚合点加点击事件

    千次阅读 2017-03-27 17:45:40
    在做项目的时候需要用到聚合点 ,先看他的整体...思路:也很简单在聚合的点上在加事件。 代码 DOCTYPE html> html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> meta name="view
  • 为iframe中的body添加click事件

    千次阅读 2016-01-06 12:37:53
    为iframe中的body添加click事件 为iframe中的body添加click事件 ;charset=utf-8"> <script type="text/javascript" s
  • Echarts树形结构图加点击事件

    千次阅读 2020-06-09 17:28:33
    //点击的节点的value // //调用点击事件 // clickNode(name,value); // }); dataTjChart.on("click", clickFun); option = { title : { text: '关联分析' }, toolbox: { ...
  • jQuery为iframe的body添加click事件

    千次阅读 2013-06-15 14:14:14
    jQuery为iframe的body添加click事件的实现代码,需要的朋友可以参考下。     为body添加click事件        function show_body_click(){  alert('you are click the body');  }  jQuery...
  • [转] body onclick 事件

    千次阅读 2014-08-06 21:26:04
    打开网页后,点击空白处并不会触发body的onclick事件。只有点击有文字的那一行才会触发。说明body没有充满网页。 但奇怪的是IE、Chrome如上面所说。而火狐点击空白处会触发onclick事件。 为了看一下body的范围,...
  • jQuery多class元素添加点击事件

    千次阅读 2018-12-07 10:31:29
    我想上面的按钮添加点击事件,于是我在jQuery里这样写 $('.btn1.btn2').on('click',function(){ alert('按钮已点击') } 但是经过测试,并没有什么用,经过查询前辈们的经验,我换成了下面这样的写法 $('body')....
  • 问题:在label中包裹input,同时label添加点击事件,会发现事件执行两次; 原因:input的时间冒泡 解决方法: html <label id="lab"> <input type="checkbox" name="" id="che" value="" checked="true"/&...
  • 首先她的点击事件没有加给button或者其他标签,当然a标签是可以的,但是一般a标签我们都是用来链接到某个网页或位置,它的href属性一般是有值的,或者尽管没有href属性值,也会有#或者javascript:;这种,那么...
  • jquery.nestable拖动模块上加点击事件

    千次阅读 2018-03-29 17:46:57
    按钮相对拖动模块绝对定位&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta name="author" content="sleest"&gt; &lt;...
  • 现有一个div,我们在点击时,把原来class去掉,并它添加一个新的class,然后监听这个新的class的点击事件,但是没生效。 代码如下: <body> <div class="open">展开</div> <script>...
  • iframe添加点击事件

    千次阅读 2018-09-05 15:48:06
    方案一:无本地源码iframe 存在跨域问题,所以需要用到document.activeElement 1.0处理方法: ... this.interval = setInterval(function ...在本地代码中,可以在#localBtn中的点击方法中执行具体需要执行的方法。
  • 超链接onclick事件

    千次阅读 2017-08-17 18:26:03
    在动态网页中,常常需要在单击超链接时处理一些数据,而不是跳转一个网页。在这种情况下,通常有以下三种处理方式: ...因此,用户很难知道这是一个可以点击的超链接。 将标签的href属性值设置为"#
  • span 点击事件

    万次阅读 2019-08-02 14:05:44
    <!... , initial-scale=1.0"> ... // 为body元素绑定click事件 $("body").bind("click",function(){ var txt = $('#msg').html() + "<p>body元素被点击.<p/>"; $('#msg').html(txt); }); }) </body>  
  • mounted () { this.bodyListener = (e) => { if (e.keyCode === 13 && e.target === document.body){ if(!this.cashierDialog){ document.getElementById('ca...
  • 现在有一个class为blessingLanguageSignature的html标签,它是动态添加的,我想一个点击事件,一开始是这样写的: $('.blessingLanguageSignature').click(function(){}); 但是死活不行。 正确的写法: $...
  • 的按钮,但是在其添加按钮的点击事件的时候总是失败(事件不被执行)。然后尝试获取 .modal-body的div里的内容也是失败。 <div id="modal-table" class="modal fade" tabindex="-1"> <div ...
  • select 触发click点击事件

    千次阅读 2019-11-26 09:39:19
    问题描述: ...我试了下原本的一些事件都不能触发click,所以只能曲线救国,在body点击事件中判断点击到的srcElement是否是 我们需要的select 即可 具体实现: $("body").click(function(){ ...
  • button 的点击事件不响应

    万次阅读 2017-09-13 21:58:36
    在项目中,页面动态添加内容,然后动态添加的button的点击事件不生效。在Jquery中动态添加内容如下所示: var bgbackground = '&lt;div id="bg"&gt;' + '&lt;/div&gt;'; $("...
  • js为li列表添加点击事件

    万次阅读 2017-11-09 23:24:01
    今天看到一个面试题目//html代码 <body> <li>1 <li>2 <li>3 </body> //js代码 var oli = document.getElementsByTagName("li"); for(var i=0; i; i++){
  • Vue解决用户点击事件延迟的300ms

    千次阅读 2019-05-28 10:20:29
    移动设备上,浏览器通常会在用户点击事件触发后的300ms才执行,是因为在检查用户是否在做双击 为了可以立即响应用户的点击事件,fastclick插件出现了 使用方法 1.下载: npm install fastclick 2.引入: import ...
  • js 动态li添加动态点击事件

    千次阅读 2019-02-26 18:32:35
    一、动态li添加动态点击事件 试了网上的on,live,bind绑定,都不起作用。最后看到https://bbs.csdn.net/topics/390414057 上的代码。试了一遍,demo ok。 附上demo: &lt;!DOCTYPE html&gt; &lt;...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>...body> <div id="xxx"></div> </body> <script...
  • Vue + ElementUI el-table添加点击事件

    千次阅读 2020-09-23 15:24:14
    分俩种情况实现点击事件 针对整行点击 @row-click="" <el-table :data="userList" highlight-current-row border @row-click="handleSeleUserId" > <el-table-column prop="id" label="UID" ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,594
精华内容 21,037
关键字:

给body加点击事件