首页
学习
活动
专区
圈层
工具
发布

为什么OnClick函数在调整窗口大小后只起作用一次?

OnClick函数在调整窗口大小后只起作用一次的原因是因为窗口大小调整会触发浏览器的resize事件,而resize事件只会在窗口大小改变时触发一次。当窗口大小调整后,浏览器会重新渲染页面,导致之前绑定的OnClick函数失效。

解决这个问题的方法是使用resize事件来重新绑定OnClick函数。可以通过监听resize事件,在每次窗口大小改变时重新绑定OnClick函数,以确保在调整窗口大小后多次触发。

以下是一个示例代码:

代码语言:txt
复制
window.addEventListener('resize', function() {
  // 重新绑定OnClick函数
  document.getElementById('myButton').onclick = function() {
    // 点击按钮后的操作
  };
});

在上述示例中,我们通过addEventListener方法监听resize事件,并在事件触发时重新绑定OnClick函数。这样无论窗口大小调整多少次,都能保证OnClick函数能够正常起作用。

需要注意的是,上述示例中的myButton是一个按钮的id,需要根据实际情况进行替换。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

  • 产品介绍链接地址:https://cloud.tencent.com/product/cvm

腾讯云云服务器(CVM)是腾讯云提供的弹性计算服务,可以快速创建、部署和扩展云服务器。通过使用腾讯云云服务器,可以轻松搭建和管理云计算环境,满足各种应用的需求。腾讯云云服务器提供了丰富的功能和灵活的配置选项,可以满足不同规模和需求的用户。

希望以上回答能够满足您的需求,如果还有其他问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

我碰到的那些面试题js及es6(1)

如果在浏览器端生成Cookie,默认是关闭浏览器后失效除非被清除,否则永久保存仅在当前会话下有效,关闭页面或浏览器后被清除存放数据大小4K左右一般为5MB与服务器端通信每次都会携带在HTTP头中,如果使用...Click和onclick的区别 1、onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么。...2、click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件 3、click可以理解为一次简单的触发,只执行一次,找不到以后就不再执行; 4、onclick...:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保存 localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据 cookie只在设置的cookie过期时间之前一直有效...不过它是一个高阶函数,可以接受一个函数作为参数。而我们可以通过传入内部的函数,来调整数组的升序或者降序。 20,数组中常用的操作?

2.4K21

JS知识点笔记-常用方法

type = “text/javascript” \> 引入外部js文件: 变量名字以字母,_和$符号开始,不能使用关键字与保留字; js是区分大小写的的...,变量可以不声明直接使用,就是不规范; 输出Html标签会直接起作用,比如换行符"“用”"括起来; alert消息对话框可以用于调试程序。...消息对话框的排他性,有消息对话框时不能程序会暂停; 调用函数,标签内加onclick = “函数()”,点击时触发; confirm 用户可以进行选择的对话框。...参数2:窗口名,不能有空格,_blank, _self, _top都是有不同意义的,_self比较特殊。...参数3:参数,包括窗口位置,大小,有没有工具栏之类的; window.open()返回一个对象,就是新的窗口,close()可以关闭对象; document.getElementById() 返回对象或

67210
  • JavaScript笔记(18)之BOM

    调整窗口大小事件 window. addEventListener('resize', function( ){ }); window.onresize是调整窗口大小加载事件,当触发时就调用的处理函数...,[延迟的毫秒数]) setTimeout()方法用于设置一个定时器,该定时器在定时器到期后执行调用函数 我们试着让程序在2秒后弹出警示框: 这个延时时间单位是毫秒,但是也可以省略,省略默认为...element.onclick=function() {}或者element.addEventListener('click', fn);里面的函数也是回调函数 停止setTimeout( )定时器 window.clearTimeout...[间隔的毫秒数]) setInterval()方法重复调用一个函数,每隔这个时间,就去调用一次回调函数 我让他每隔两秒打印一次数字 案例: 倒计时 我自己先做了一遍,虽然还是很多地方难住了,...好在都解决了,自己想办法解决问题真的很有趣 看一下我是怎么做的吧 听老师讲完,发现自己还存在一些问题: 解决方法:在调用定时器之前先执行一次函数 停止setInterval( )定时器

    86910

    js中setTimeout的用法和JS计时器setTimeout与setInterval方法的区别和confirm方法

    在执行时,是在载入后延迟指定时间后,去执行一次表达式,仅执行一次 setTimeout 在执行时,它从载入后,每隔指定的时间就执行一次表达式 1,基本用法: 执行一段代码: var i=0; setTimeout...先来看看两者JS手册及英文词典上的解释: JS手册»setTimeout() : 用于在指定的毫秒数后调用函数或计算表达式; 英文释义»timeout() : 超时;暂时休息;工间休息; JS手册...会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭; 英文释义»interval() : 间隔;间距;幕间休息; 不难看出, 只要我们仔细体会JS手册及命名释义, 就能很容易的区分开两者的区别...简单的说, 两才的区别在于, setTimeout()方法是在等待指定时间后执行函数, 且只执行一次传入的句柄函数. setInterval()方法是每指定间隔时间后执行一次传入的句柄函数,循环执行直至关闭窗口或...例子如下: var timeout=function(){ alert('等待2s后弹出,仅此一次!在等待时间内clearTimeout可停止执行!')

    3.4K10

    浅析一次HTTP请求

    >目标端口 [SYN] :同步握手信号 Seq : 消息编号 Win: TCP 窗口大小 Len: 消息长度 Mss: 最大报文段长度 Ws: 窗口缩放调整因子 SACK_PERM : SACK选项,这里等于...Win: TCP 窗口大小,是指TCP传输能接受的最大字节数,这个可以进行动态调节,也就是TCP的滑动窗口,通过动态调整窗口大小,来控制发送数据的速率。...Ws: 窗口缩放调整因子:在前面说 TCP 窗口大小中我们说到,默认情况下,TCP 窗口大小最大只能支持64KB的缓冲数据,在今天这个高速上网时代,这个大小肯定不满足条件了,所以,为了能够支持更多的缓冲数据...RFC 1323 中就规定了 TCP 的扩展选项,其中窗口缩放调整因子就是其中之一,这个是如何起作用的呢?...首先说明,这个参数是在 [SYN] 同步阶段进行协商的,我们结合上面抓包数据分析下。我们看到第一次请求协商的结果是WS=256,然后再 ACK 阶段扩展因子生效,调整了窗口大小。

    1.6K41

    01_Cookie&WebStorage

    1.1 Cookie的作用 对于前端来讲,Cookie可以存储一些临时数据,在页面之间共享,并且可以在页面关闭后,再开打开,还可以继续获取。...localStorage的优势 拓展了Cookie的4KB限制,并且可以将第一次请求的数据直接存储到本地,其容量相当于一个5MB大小的数据库。...localStorage也有一些局限 IE浏览器在8以上版本才支持localStorage。 不同浏览器保存的数据量大小不统一。...页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会在顶级浏览上下文中初始化一个新的会话。...Cookie 设置的 Cookie 过期时间之前一直有效,即使窗口或浏览器关闭。 作用域:sessionStorage 只在同源的同窗口(或标签页)中共享数据,也就是只在当前会话中共享。

    20800

    理解 React Hooks

    借用 @Sunil Pai 的两张图来说明这个问题: [image.png] [image.png] 从 React Hooks 中体验出来的是 React 的哲学在组件内部的实现,以前我们只在组件和组件直接体现...Custom Hooks 自定义组件 接着上面的监听窗口大小的代码,我们接着讲自定义 hooks, 证明 react hooks 是怎么使到组件内的逻辑可复用的。...我们使用React本地状态来保持当前窗口宽度,并在窗口调整大小时使用副作用来设置该状态 import { useState, useEffect} from 'react'; // custom hooks...每次useState()调用,当在第一次运行时,将setter函数(绑定到光标位置)推送到setter数组,然后将某个状态推送到state数组。...[image.png] 第一次渲染:作为光标增量写入数组的项目。 3) 后续渲染 每个后续渲染都会重置光标,并且只从每个数组中读取这些值。

    5.5K140

    JS-DOM 综合练习-动态添加删除班级成绩表

    window.onload在最上面,也是页面加载完成后执行的效果,就和我之前做ZTA官网的bug一样了,那么后添加的就不能执行onmouseover的变色函数了。...那该怎么办,后添加的东西怎么再调用这个已经加载好的函数?把函数放到下面起作用吗?...很明显,不行,即使放到下面,也是只有加载进来的这两行html中已经写好的tr会执行变色函数,你利用添加button后添加的还是不能调用。...,那么就把变色函数封装到一个函数中,放到最下面,然后window.onload还是在最上面,以保证页面加载完成后首先调用函数让已经存在的两行能够执行变色命令,但是封装的变色函数除了在window.onload...下调用一次,在添加函数内部,也得调用一次,这样新添加的函数就能够执行变色函数了。

    4.1K80

    浏览器中的JavaScript核心BOM(浏览器对象模型)重点掌握对象之Window对象的属性与方法

    简单点来说就是在指定时间之后调用设定的函数,前者是调用一次,后者是反复不停地调用。...setTimeout() 该函数需要传入两个参数,第一个参数是一个函数,在指定时间之后执行该函数;第二个参数是时间,单位为毫秒 //创建了一个定时器,1秒后会打印 `执行了一次` setTimeout(...,在指定时间之后执行该函数;第二个参数是时间,单位为毫秒 //创建了一个定时器,每过1秒后都会打印 `执行了一次` setInterval(function() { console.log('执行了一次...') },1000) //执行了一次 //执行了一次 //执行了一次 // ………… 我们可以看到,传入的函数一直在执行,因为这个函数作用就是在指定时间后反复执行。...yes/no,默认为yes resizable 是否可调整窗口大小。yes/no,默认为yes menubar 是否显示菜单栏。yes/no,默认为yes location 是否显示地址字段。

    1.8K20

    JavaScript 入门(下)

    在JavaScript中,一个浏览器窗口就是一个window对象。window对象主要用来控制由窗口弹出的对话框、打开窗口或关闭窗口、控制窗口的大小和位置等等。...三、改变窗口大小 在JavaScript中,可以使用window对象的resizeTo()方法或resizeBy()方法来改变窗口的大小。..." onclick="resizeWindow()"/> 在浏览器预览效果如下: 分析: 当我们点击“改变大小”按钮之后,当前窗口的的宽度为200px,而高度变为200px...1、setTimeout()和clearTimeout() 在JavaScript中,我们可以使用setTimeout()方法来设置“一次性”调用的函数。... 在浏览器预览效果如下: 分析: 打开页面2秒后,浏览器会弹出欢迎语。由于setTimeout()方法只会执行一次,所以只会弹出一次对话框。

    1.2K20

    JQuery 对控件的事件操作

    JQuery是非常棒的js类库,有丰富的UI库和插件,不过我钟爱他的是他的选择器,感觉其他功能有时跟后台人员距离很远,所以一般我也只使用一下他的选择器。...对于控件的事件,jQuery已经提供了丰富的方法,包括绑定、一次绑定、触发等,阿拉今早看看叫一哪能用额伐,大虾路古就可以了。....click(function() { alert("I'm Test Button"); }); 就这样我们在testButton这个按钮上绑定了onclick事件,执行alert语句。...为什么有这个取消特定函数的方法呢,我们来看下例子,我们会发现,javascript的事件,跟C#的事件如出一辙,事件的绑定是叠加(+=) 而不是覆盖。...我这里取消了绑定,又删除了特定的绑定,为什么还会执行Eat呢? 其中的原由要看jQuery的类库了,我估计它只删除了通过JQuery绑定的那些事件了,呵呵。 那这时候我们该如何呢?

    2K60

    python中用turtle画一个圆形(pythonturtle教程)

    每次都用乌龟(turtle) 来画出一个正方形,然后通过旋转3°后,继续画一样的正方形,在通过120次循环后就实现了完整的圆,这里当然也可以用其他的角度和次数,只要能完成360度就可以了。...(正整数) “speed”: number in range 0..10 绘画速度(范围0-10) “resizemode”: “auto” or “user” or “noresize” 大小调整模式...False 外表 shape() 设置乌龟的图形形状,可选( “arrow”,“turtle”,“circle”,“square”,“triangle”,“classic”) resizemode() 大小调整模式...不调整 shapesize() | turtlesize() 返回笔的属性。...canvas 右下X坐标 动画控制 delay() 动画延迟(毫秒)参数:(integer )一个数字 tracer() 开启动画,设置延迟 n – nonnegative integer n个动作执行一次

    2.4K10

    dotnet 读 WPF 源代码笔记 使用 Win32 方法修改窗口的坐标和大小对窗口依赖属性的影响

    咱可以使用 Win32 的 SetWindowPos 修改窗口的坐标和大小,此时 WPF 的窗口的 Left 和 Top 和 Width 和 Height 依赖属性也会受到影响,本文将会告诉大家在啥时候会同步更改..."> 可以看到在完成了上面界面之后,在拖动窗口,以及修改窗口大小的时候,都可以看到值是对应变化的。... /// HWND_NOTOPMOST:将窗口置于所有非顶层窗口之上(即在所有顶层窗口之后)。如果窗口已经是非顶层窗口则该标志不起作用。...,此时点击的时候,依赖属性也跟随变化 再来实现修改窗口大小的方法,点击方法将调用 SetWindowPos 方法修改窗口的宽度和高度 private void SizeButton_OnClick...这就是为什么最大化的时候修改坐标不会更新依赖属性 另外在 WmMoveChanged 方法的实现里面,可以看到一个坑,在判断是否需要更新的时候,是采用 _actualLeft 和 _actualTop

    90320

    Bootstrap 基于Bootstrap和JQuery实现动态打开和关闭tab页

    '})">  项目管理1 onclick...options.menuID); if(isExists){ // 如果tab标签页已打开,则选中、激活 $("#tab-a-" + options.menuID).click(); // 注意,必须是点击 a标签才起作用...find("a").click(); } else if (li_active.next()[0]) { // 如果当前tab标签之前不存在tab标签,并且在其之后存在tab标签,则激活后一个...document.body.clientHeight; iframe.height= h - offsetTop;// 这里offsetTop可以替换成一个比较合理的常量值 }); } /** * 浏览器窗口大小发生变化时...,自动调整iframe页面高度 * 浏览器等因素导致改变浏览器窗口大小时,会发生多次resize事件,导致频繁调用changeFrameHeight(),* 所以函数中添加了延迟事件 */ $(function

    8.1K20

    VCL 控件分类_验证控件的分类

    TForm 右下角小窗体中调整form 显示位置。...) ShowModal(),Show(); (是否当前窗体关闭后才能操作父窗体:模态方式,非模态方式) Close(); (关闭窗体) (在Event 选项卡中) OnCreate(); 创建窗体是发生事件...OnMouseWheelDown:鼠标滚轮下滚触发 OnMouseUp:鼠标滚轮上滚触发 OnMouseWheel:鼠标滚轮滚动 OnResize:窗口或框架调整大小时。 OnPaint:窗口重画。...(加速键是在该父菜单激活后才能使用,快捷键则可以直接使用) BitMap:为菜单项加图标 右键 Insert From Template:快速使用模版创建菜单项 Frames 可用于组合多个控件,动态生成多个控件集合...TBitButton Glyph:位图图像 Cancle:是否为取消按钮(ESC键起作用) Default:是否为默认按钮(Enter键起作用) TabOrder:组件的Tab 顺序 TabStop:焦点是否在该组件上停留

    4.8K10

    怎样在 Unity 中创建 UI

    一般来说,当处理 UI 组件的时候,我更喜欢使用矩形转换工具来移动和调整组件的大小: UI-5 把 text 组件放到任何你想放的位置。我把它放到了 Panel 组件的水平和竖直中心。...你可以在 这里 了解更多。 『Font Size』可以调整字体的大小。如果你觉得在你的游戏中字体看上去不太好,你可以使用前面介绍的矩形转换工具来调整 Text 组件的矩形框。...:』 调整 text 组件的字体大小,可能也要调整矩形框的大小为了让它看起来合适。...为了让你通过一个按钮来调用一个函数,那么这个函数需要声明为 public,这就是为什么我在『Manager』脚本中把所有函数设置为public。...那么,让我们其他的按钮也变得起作用吧: 在层级视图中选中重试按钮并且找到『OnClick() 点击『+』图标,添加一个新的项 拖拽『_GM』对象到游戏物体区域 点击显示『No Function』的下拉菜单

    6.5K20
    领券