精华内容
下载资源
问答
  • 我想实现效果如windows窗口的关闭按钮一样,默认是一个图片,鼠标移上去图片有变化,鼠标点击下去图片再次变化,如果触发click事件就关闭,但偶尔鼠标已经点击下去了,发现不该关闭后悔了,只需要移动到关闭按钮外...
  • 工作上有一个功能要实现,这个功能是这样,右上角有一个展开按钮,点击按钮展示分享、跳转等连接菜单。  在打开菜单时候,点击菜单以外地方关闭菜单。以下是我代码:  $('.menu-btn').on('click',...

        工作上有一个功能要实现,这个功能是这样的,右上角有一个展开按钮,点击按钮展示分享、跳转等连接的菜单。

         在打开菜单的时候,点击菜单以外的地方关闭菜单。以下是我的源代码:       

    $('.menu-btn').on('click',function(){
        if ($("#operationWarp").is(":hidden")) {
            $("#operationWarp").show();    //如果元素为隐藏,则将它显现
            $(document).one('click', function () {
                $('#operationWarp').hide();
            })
        } else {
            $("#operationWarp").hide();     //如果元素为显现,则将其隐藏
        }
    });

        这样的写法在安卓中是现实正确的,没有任何毛病。但是在IOS当中,菜单打开之后,点击菜单以外的地方,无法关闭菜单。

        经过问题的排查,找到了问题,ios在用one绑定click事件的时候,触发不了click(具体原因没有深究,如果大家有知道的,欢迎指出),但是如果把click改为touchstart事件,那么事件就能触发,不过改成以下代码后,会出现一个大bug,就是菜单里面的链接分享什么的都不能点

    $(document).one('click touchstart', function () {
        $('#operationWarp').hide();
    })

        现祭出最后的解决方案,原理是通过fastclick去重置ios和ipad的事件,使用方法十分简单,就是在HTML文件当中映入fastclick,在js里面初始化一下就好,然后其他代码都完全不用改,以下是代码:

        html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
        <link rel="stylesheet" type="text/css" href="../css/common.css">
        <meta name="visual-width" content="750">
        <title>欢乐抽奖</title>
    </head>
    <body>
        <div class="container">
            
        </div>
        <script type="text/javascript" src="../lib/zepto.min.js"></script>
        <!--在此引入fastclick文件-->
        <script type="text/javascript" src="../lib/fastclick.js"></script>
    </body>
    </html>
    

        JS:

    .$(function(){
        if (window.FastClick) {
            // 初始化fastclick
            window.FastClick.attach(document.body);
        }
        //右上角按钮事件
        $('.menu-btn').on('click',function(){
            if ($("#operationWarp").is(":hidden")) {
                $("#operationWarp").show();    //如果元素为隐藏,则将它显现
                $(document).one('click', function () {
                    $('#operationWarp').hide();
                })
            } else {
                $("#operationWarp").hide();     //如果元素为显现,则将其隐藏
            }
        });
    });

     

    展开全文
  • 今天做了个手机页面,点击...网上解决这个bug帖子很多,这篇帖子主要是讲原理,这里写个简单的代码,大家可以复制到自己页面中去实验: <html> <head> <meta charset="utf-8"> <met...

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭。

    网上解决这个bug的帖子很多,这篇帖子主要是讲原理,这里写个简单的代码,大家可以复制到自己页面中去实验:

    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
    </head>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <style>
    *{min-height:100px; line-height:100px;}
    body{ background:#ddd;}
    a,input{display:block;}
    div{background:#9CF;}
    </style>
    <body>
        <a href="#" >链接</a>
        <input type="button" value="按钮"/>
        <div>div或span等</div>
    </body>
    </html>
    <script>
    
    $("body").bind("click",function(){
        alert("body 被点击")
    })
    </script>

    上面这段代码在其他浏览器里面没有问题,在IOS的浏览器中,点击链接和按钮都会有弹窗,但是点击其他区域却没有。

    原因是因为IOS浏览器的按钮和链接才响应click事件,其他标签不响应,所以点击链接和按钮之外的其他地方并不会把click事件冒泡到body上。

    我们做一个比喻来理解这个事件是怎么运作的:

    屏幕被点击后,系统会发送一个事件公告(click),链接和按钮收到这个公告后会处理相应的行为(比如打开个新页面,提交表单,用户绑定的其他行为)
    window、document、body、div并不会搭理这个公告,跟没看到似的,自然也就没有弹窗出现
    body只接受内部的冒泡事件,点击按钮后触发了按钮的click事件,然后按钮会告诉自己的上级(body):老大,我被点击了,
    body会说:好的,我会处理的,这时候弹窗就出来了。
    body里面的div,span等标签默认是不会理睬click事件公告的,但是我们可以开启他,开启后他们就跟按钮一样,可以接受click事件,并汇报给上级。
    开启方法:给标签绑定一个任意事件

    1.HTML标签中添加事件属性

    <div onMouseOver>div或span等</div>
    <div onClick>div或span等</div>
    <div onKeyDown>div或span等</div>

    2.用js或者jquery绑定一个事件

    $("body div").bind("click",function(){})

    所以最后我们的弹出菜单可以这样写

    /*给body里面的任意元素绑定事件,让这些标签能接受click事件*/
    $("body>*").bind("click",function(){});

    $("#button").bind("click",function(e){/*给按钮绑定点击事件*/
        $("#menu").show();//按钮点击后显示菜单
        
        $("body").one("click",function(){/*菜单显示后:给body绑定点击事件,执行一次后自动删除这个绑定*/
            $("#menu").hide();//body收到click事件后关闭菜单
        });
        e.stopPropagation();//停止冒泡,按钮被点击后不告诉body,因为click事件如果冒泡到body会关闭菜单。

    })
    $("#menu").bind("click",function(e){/*给菜单绑定点击事件*/
       e.stopPropagation();//停止冒泡,菜单被点击后不告诉body,不然菜单要被关闭
    })
     

     

    转载于:https://www.cnblogs.com/godok/p/5815533.html

    展开全文
  • 我们常常需要在其标题栏上再增加一个些按钮,如下图问题出来了,增加按钮后,点面板收缩按钮,增加的按钮就消失了而且面板收缩的click事件,也跟新增的按钮绑定了,这样导致面板无法使用,还好是开源代码,研究其...

    问题描述:
    DWZ的panel面板比较常用,我们常常需要在其标题栏上再增加一个些按钮,如下图
    问题出来了,增加按钮后,点面板收缩按钮,增加的按钮就消失了
    而且面板收缩的click事件,也跟新增的按钮绑定了,
    这样导致面板无法使用,还好是开源代码,研究其代码就能解决问题
    \

     

    /**
     * @author Roger Wu
     * @version 1.0
     */
    
    function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    }
    
    (function ($) {
        $.extend($.fn, {
            jPanel: function (options) {
                var op = $.extend({ header: "panelHeader", headerC: "panelHeaderContent", content: "panelContent", coll: "collapsable", exp: "expandable", footer: "panelFooter", footerC: "panelFooterContent" }, options);
                return this.each(function () {
                    var $panel = $(this);
                    var close = $panel.hasClass("close");
                    var collapse = $panel.hasClass("collapse");
    
                    var $content = $(">div", $panel).addClass(op.content);
                    var title = $(">h1", $panel).wrap('<div class="' + op.header + '"><div class="' + op.headerC + '"></div></div>');
                    var buttonid = "panel_" + S4();
                    if (collapse) $("<a id=\"" + buttonid + "\" href=\"\"></a>").addClass(close ? op.exp : op.coll).insertAfter(title);
    
                    var header = $(">div:first", $panel);
                    var footer = $('<div class="' + op.footer + '"><div class="' + op.footerC + '"></div></div>').appendTo($panel);
    
                    var defaultH = $panel.attr("defH") ? $panel.attr("defH") : 0;
                    var minH = $panel.attr("minH") ? $panel.attr("minH") : 0;
                    if (close)
                        $content.css({
                            height: "0px",
                            display: "none"
                        });
                    else {
                        if (defaultH > 0)
                            $content.height(defaultH + "px");
                        else if (minH > 0) {
                            $content.css("minHeight", minH + "px");
                        }
                    }
                    if (!collapse) return;
                    var $pucker = $("#" + buttonid);
                    var inH = $content.innerHeight() - 6;
                    if (minH > 0 && minH >= inH) defaultH = minH;
                    else defaultH = inH;
                    $pucker.click(function () {
                        if ($pucker.hasClass(op.exp)) {
                            $content.jBlindDown({
                                to: defaultH, call: function () {
                                    $pucker.removeClass(op.exp).addClass(op.coll);
                                    if (minH > 0) $content.css("minHeight", minH + "px");
                                }
                            });
                        } else {
                            if (minH > 0) $content.css("minHeight", "");
                            if (minH >= inH) $content.css("height", minH + "px");
                            $content.jBlindUp({
                                call: function () {
                                    $pucker.removeClass(op.coll).addClass(op.exp);
                                }
                            });
                        }
                        return false;
                    });
                });
            }
        });
    })(jQuery);

     

    转载于:https://www.cnblogs.com/nele/p/5295908.html

    展开全文
  • 通常按钮是放在某个容器中,例如Panel,并且这个容器可能包含不止一个按钮(例如关闭、主要功能等),如果为每一个按钮都“直接”绑定相应的事件,就不便于管理。 一个相对合适实践是这样,在每一个button类...

    说在前面

    • Unity版本:2017.4.37
    • NGUI版本:3.11.2
    • 其他:本篇文章中使用到了NGUI插件,但是不影响理解方法。同时,涉及了c#的委托,和函数指针有些类似,不熟悉的建议查阅相关资料

    说明

    • 通常按钮是放在某个容器中,例如Panel,并且这个容器可能包含不止一个按钮(例如关闭、主要功能等),如果为每一个按钮都“直接”绑定相应的事件,就不便于管理

    在这里插入图片描述

    • 一个相对合适的实践是这样的,在每一个button类中声明委托,在包含这些button“容器类”中确定每一个button中委托的指向,这样就可以在这个“容器类”中统一管理该容器下所有button的事件(如上图)。

    实例

    • 界面

      • 层次结构如下
        在这里插入图片描述

      • Panel配置如下,最后的Panel(Script)为自定义脚本(见后面代码),需要将上面的button1/2/3拖动过去(或者点后面的小圆点)
        在这里插入图片描述

      • Button配置如下,其他两个基本相同,注意Box ColliderButton Listener为自定义脚本(代码见后面)
        在这里插入图片描述

    • 代码

      • Panel
        using System.Collections;
        using System.Collections.Generic;
        using UnityEngine;
        
        public class Panel : MonoBehaviour {
        
            public GameObject button1; // 对应上面panel脚本中的button1
            public GameObject button2;
            public GameObject button3;
        
            private void Awake()
            {
                ButtonListener.Get(button1).onClick = OnButton1Click; // 确定每一个button委托的指向
                ButtonListener.Get(button2).onClick = OnButton2Click;
                ButtonListener.Get(button3).onClick = OnButton3Click;
            }
        
            private void OnButton1Click(GameObject go) // button1对应的click事件
            {
                Debug.Log("Button 1 clicked!");
            }
        
            private void OnButton2Click(GameObject go)
            {
                Debug.Log("Button 2 clicked!");
            }
        
            private void OnButton3Click(GameObject go)
            {
                Debug.Log("Button 3 clicked!");
            }
        
        }
        
      • ButtonListener
        using System.Collections;
        using System.Collections.Generic;
        using UnityEngine;
        
        public class ButtonListener : MonoBehaviour {
        
            public delegate void VoidDelegate(GameObject go);
        
            public VoidDelegate onClick; 
        
        	void  OnClick()
            {
                if(onClick != null) // 若该委托不为空
                {
                    onClick(gameObject); // 那么就调用该委托(指向的函数),gameObject为自身
                }
            }
        
            public static ButtonListener Get(GameObject go)
            {
                ButtonListener listener = go.GetComponent<ButtonListener>();
                if (listener == null)
                    listener = go.AddComponent<ButtonListener>();// 防止未创建
                return listener;
            }
        }
        
        
    • 结果

      • 界面
        在这里插入图片描述

      • 运行后,点击对应的按钮,在Console输出结果如下
        在这里插入图片描述

    展开全文
  • 搜了一下检测 这个事件的检测方法 也没有搜出来 所以来这里请教一下各位大神 代码如下 vue + element ``` html代码 <el-button size="mini" type="primary" @click="upload">上传 ...
  • 添加提示,使按钮点击提交数据时,按钮不可以再操作...(1)按钮单击时触发的事件:@click=“tijiao()” (2)在单击事件内添加提示信息的代码 (3)在单击事件的处理代码结束后,关闭提示信息:loadingObj.close(...
  • (C#)用代码创建一个新按钮myButton

    千次阅读 2014-09-03 10:00:37
     * 为新按钮添加一个Click事件(注册监听程序) //参见“事件”  * MessageBox.Show(); 转义符(\n:换行 \": 引号)  * 关闭窗体方法; 退出程序方法。  *  * 步骤:  * 创建一个C
  • VB对象的事件和方法

    2020-09-15 12:44:45
    例如,用户点击一次按钮,就会触发一次该按钮的单击事件,即Command1_Click事件。 一个事件,就好比一个动作,用户单击按钮是一个事件,双击按钮也是一个事件,按下一个键盘的按键是一个事件,关闭某个窗口也是一个...
  • 系统一启动,用for语句动态创建N个按钮,同时绑定下面的Click事件。 3.遇到的问题点: 虽然这样就能实现每点击一个按钮能创建子画面,但是关闭对应的窗口就遇到问题,关不掉想要关掉的窗体(例如:主画面上有A,...
  • //这是主窗体中点击关闭按钮的form_closed事件。 private void MainWindow_FormClosing(object sender, FormClosingEventArgs e) { string isTip = UtilsClass.OperateAppConfig("IsTip"); if (isTip == "true") ...
  • 代码如下: $(‘#aa’).click(function(){ //按钮单击事件 $(‘#w’).window({//窗口初始化 title:’随便点’,width:400,height:300,iconCls:’icon_add’, //重要部分 onBeforeClose:function(){ //当面板关闭之前...
  • 以一个很简单需求为例,在web开发中Dialog很常见,每个Dialog都有一个关闭按钮,按钮对应Dialog关闭方法,代码看起来大概是这样 代码如下:<!DOCTYPE html><html> <head> <title>Te
  • 1、 先关闭 DataGridView 最后一行为添加行: ... 2、将 BindingNavigator DeleteItem 属性设置为 None(无) 3、在 bindingNavigatorDeleteItem Click 事件代码中写入: private void bindingNavigatorDele
  • 前端常用代码片段(一) 点这里前端常用...问题点击穿透问题:点击蒙层(mask)上的关闭按钮,蒙层消失后发现触发了按钮下面元素的click事件 zepto的tap事件是绑定到document的,所以一般点击tap事件都会冒泡到docu...
  • 如我们需要点击按钮 btnClose 关闭窗体时,可以使用以下代码: btnClose.Click += new System.EventHandler(btnClose_Click); 其中,所要调用 btnClose_Click 方法是一个标准方法,定义如下所示。 private ...
  • 请认真阅读以下关于某传输系统技术说明、状态转换图及C++代码,根据要求回答问题1和问题2。...触发状态转换事件click、complete和timeout 3种,事件与其相应状态转换如图6-18所示。下面【C++...
  • //-新建一窗口,上面放置一按钮对象cb_msgcb_msg的click事件代码-Open(msg,这是一个测试关闭消息窗口的例子)//---在窗口Local external Functions声明以下API函Function long FindWindowA (String lpClassName , ...
  • 一款非常好WPF编程宝典2010 源代码

    热门讨论 2014-04-14 09:57:41
    按钮的ListBox控件 495 18.2 ListView控件 497 18.2.1 使用GirdView视图创建列 499 18.2.2 改变列的尺寸 500 18.2.3 单元格模板 500 18.2.4 创建自定义视图 503 18.3 TreeView控件 510 18.3.1 使用数据绑定的...
  • 点击关闭按钮,老是弹出“游戏时间不能为零或负数”对话框。procedure Tform1.UpDown1click(sender:Tobject,Button:);var i:integer;begin //读入游戏时间 i:=inifile.readinteger(setup,time,5); //修改游戏...
  • 通过一个按钮 关闭上下左右Viewport里items达到一个全屏效果 &lt;a href="#" id="hideit"&gt;全屏&lt;/a&gt; 然后用个函数给它加上事件 就OK了,代码如下: Ext....
  • 这里弹窗中确定和取消按钮功能一致,都是关闭弹窗。故自定义只显示取消按钮。这里弹窗为ant vue源码执行自Modal.js 弹窗代码: handleCancel和handleOk事件都为this.close(),功能相同,只需要显示一个。 解决...
  • Flash 弹出菜单后,点击舞台其他地方,关闭菜单功能 实现方法:实现原理:通过event 的事件阻止机制实现。以下为代码: /** * 单击按钮,弹出菜单 */this.btn.addEventListener(MouseEvent.CLICK, showTypeList);...
  • 按钮事件中写如下代码: protected void btnClose_Click(object sender, EventArgs e) { Response.Write("window.opener=null;window.close();"); }注册脚本块 ScriptManager.RegisterStartupScrip
  • 按照原来想法,在登录按钮Click事件中添加代码 FrmMain fm= new FrmMain(); Fm.Show(); this.Close(); 但事实证明这个是行不通。因为主窗口是由登录窗口打开,所欲我们关闭登录窗口时,主窗口也会被一起关闭。...
  • 方法中写上关闭该窗体的代码,只需一行,如下: this.Close(); 测试 按键盘Ctrl+F5键 点击取消按钮 消息框 语法: DialogResult result = MessageBox.Show(消息内容); 第一种 // 最简单消息框 MessageBox.Show(...
  • 学生管理系统 源代码

    2019-01-07 21:43:37
    (4)当选中DataGridView控件中某一行记录时(DataGridView控件Mouse_Click事件),“课程名字”、“学分”、“课程代码”文本框中分别显示该项对应课程信息; (5)当选中某一行记录并单击【编辑】按钮时,...
  • c# 加密和解密相关代码

    热门讨论 2011-09-06 11:04:59
    inputStream:要计算其哈希代码的输入。 返回值:计算所得哈希代码。 图19.2 使用MD5 算法加密数据 第19章 加密与解密技术 831 计算指定字节数组指定区域哈希值,语法格式如下: public byte[] Compute...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 133
精华内容 53
关键字:

关闭按钮的click事件代码