首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么.click()和on (“单击”)在引导折叠按钮上表现不同?

.click()和on("单击")在引导折叠按钮上表现不同的原因是它们是两种不同的事件绑定方式。

.click()是jQuery提供的一个方法,用于模拟用户点击操作。当使用.click()方法绑定点击事件时,它会触发元素的点击事件,并执行相应的操作。这种方式适用于大多数情况下,包括普通的按钮点击、链接点击等。

而on("单击")是JavaScript原生的事件绑定方式,用于绑定特定事件类型的处理函数。当使用on("单击")方法绑定点击事件时,它会将指定的处理函数绑定到元素的点击事件上。这种方式更加灵活,可以处理更多的事件类型,并且可以绑定多个处理函数。

在引导折叠按钮上,.click()和on("单击")的表现不同可能是因为它们绑定的事件处理函数不同。例如,如果使用.click()方法绑定点击事件,可能只执行了默认的折叠/展开操作,而没有执行其他自定义的操作。而使用on("单击")方法绑定点击事件时,可以通过指定的处理函数来实现更多的自定义操作,例如改变按钮的样式、显示/隐藏其他元素等。

总结起来,.click()是一种简单的事件绑定方式,适用于大多数情况下的点击操作;而on("单击")是一种更加灵活的事件绑定方式,可以处理更多的事件类型,并且可以绑定多个处理函数。具体使用哪种方式取决于需求的复杂程度和个人偏好。

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

相关·内容

最新版水果FL Studio21新版本更新全解析!80项更新与改进!

添加音轨(Adding tracks)-播放列表剪辑焦点区域新增一个 [+] 按钮,通过左键右键单击选项添加乐器音频音轨。...04通道机架通道按钮单击右键)Channel Button (Right-Click)-新的“补丁”选项将当前实例转换为补丁格式。...06浏览器(改进)标签(Tags)-单击标签(底部)打开更多选项。偏好(Favoriting)-单击鼠标切换内容的星号。...样本预览面板显示采样率、比特深度立体声元数据。选项(Option)-“选项卡显示图标和文本”。浏览器(Browser)-为选项卡添加“冻结”选项。...“冻结”时,浏览器停止保存状态(文件夹是否折叠)。“折叠结构”按钮起到“恢复为冻结状态”的作用。07钢琴卷视图(View)-更换音符时自动滚动钢琴窗。

3.3K30

FL Studio21最新中文版本全新功能详细介绍

添加音轨(Adding tracks)-播放列表剪辑焦点区域新增一个 [+] 按钮,通过左键右键单击选项添加乐器音频音轨。...04通道机架通道按钮单击右键)Channel Button (Right-Click)-新的“补丁”选项将当前实例转换为补丁格式。...06浏览器(改进)标签(Tags)-单击标签(底部)打开更多选项。偏好(Favoriting)-单击鼠标切换内容的星号。...样本预览面板显示采样率、比特深度立体声元数据。选项(Option)-“选项卡显示图标和文本”。浏览器(Browser)-为选项卡添加“冻结”选项。...“冻结”时,浏览器停止保存状态(文件夹是否折叠)。“折叠结构”按钮起到“恢复为冻结状态”的作用。07钢琴卷视图(View)-更换音符时自动滚动钢琴窗。

3.7K20

移动端必备的H5问题及解决方案

产生原因 为什么会产生 click 延时? iOS 中的 safari,为了实现双击缩放操作,单击 300ms 之后,如果未进行第二次点击,则执行 click 单击操作。...但是, App 中,无论是否需要双击缩放这种行为,click 单击都会产生 300ms 延迟。 为什么会产生 click 点击穿透?...微信公众号 H5 开发中,页面内部点击分享按钮调用 SDK,方法不生效。...解决方案 解决方法:添加一层蒙层,做分享引导。 因为页面内部点击分享按钮无法直接调用,而分享功能需要点击右上角更多来操作。 然后用户可能不知道通过右上角小标里面的功能分享。...分为两种场景,一种是开发测试时调试,一种是生产环境上调试。 为什么有生产环境上调试呢?有些时候测试环境没法复现这个 bug,测试环境生产环境不一致,此时就需要紧急生产调试。

4K42

WebDriverIO教程:处理Selenium中的警报覆盖

另外,由于不能将它们作为窗口来处理,这就是为什么要处理它们有些棘手的原因,但是请不要担心,您可以本WebDriverIo教程的后面部分中找到更多有关此的信息。...警报模式警报之间的主要区别在于,如果没有请求的操作(如“确定”或“取消”),警报将不会发出。模式中,通过提供特殊的CSS代码使用标记来完成。单击模态以外的其他位置可以关闭该模态。...叠加模态 该模式是使用客户端框架(例如,引导程序,ReactJS)构建的。开发人员可以用来显示一些信息,弹出窗口表格。...它可以帮助用户单击“警报”弹出窗口上的“确定”按钮。...警报只能通过预期的操作关闭,而覆盖模式可以通过单击背景的任意位置来关闭。现在,我将向您展示如何使用WebDriverIO自动执行叠加模态。 当自动化模态时,您不必处理特殊的代码或类。

5.8K30

WebDriverIO教程:处理Selenium中的警报覆盖

另外,由于不能将它们作为窗口来处理,这就是为什么要处理它们有些棘手的原因,但是请不要担心,您可以本WebDriverIo教程的后面部分中找到更多有关此的信息。...警报模式警报之间的主要区别在于,如果没有请求的操作(如“确定”或“取消”),警报将不会发出。模式中,通过提供特殊的CSS代码使用标记来完成。单击模态以外的其他位置可以关闭该模态。...叠加模态 该模式是使用客户端框架(例如,引导程序,ReactJS)构建的。开发人员可以用来显示一些信息,弹出窗口表格。...它可以帮助用户单击“警报”弹出窗口上的“确定”按钮。...警报只能通过预期的操作关闭,而覆盖模式可以通过单击背景的任意位置来关闭。现在,我将向您展示如何使用WebDriverIO自动执行叠加模态。 当自动化模态时,您不必处理特殊的代码或类。

6.2K10

水果编曲软件FLStudio最新21简体中文版本

添加音轨(Adding tracks)-播放列表剪辑焦点区域新增一个 [+] 按钮,通过左键右键单击选项添加乐器音频音轨。...04通道机架 通道按钮单击右键)Channel Button (Right-Click)-新的“补丁”选项将当前实例转换为补丁格式。...06浏览器(改进) 标签(Tags)-单击标签(底部)打开更多选项。 偏好(Favoriting)-单击鼠标切换内容的星号。...样本预览面板显示采样率、比特深度立体声元数据。 选项(Option)-“选项卡显示图标和文本”。 浏览器(Browser)-为选项卡添加“冻结”选项。...“冻结”时,浏览器停止保存状态(文件夹是否折叠)。“折叠结构”按钮起到“恢复为冻结状态”的作用。 07钢琴卷 视图(View)-更换音符时自动滚动钢琴窗。

2.6K00

浅析 JavaScript 中的事件委托

为什么要进行事件委托? 首先实现一个小功能:单击 HTML 的按钮后,把消息输出到控制台。...毫无疑问,按钮本身会收到单击事件。而且所有按钮的祖先,甚至包括 document window 对象也会收到。...点击事件的传播分三个阶段: 捕获阶段 —— 从window,document 根元素开始,事件向下扩散至目标元素的祖先 目标阶段 —— 事件在用户单击的元素触发 冒泡阶段——最后,事件冒泡通过目标元素的祖先...'Body click event in capture phase'); }, true); 在这个 Codesandbox 演示[2]中,单击按钮时,你可以控制台中查看事件的传播方式。...你不需要把委托事件监听器直接附加到按钮,而是可以委托父监听 。单击按钮时,父元素的侦听器将会捕获冒泡事件(还记得前面所说事件传播吗?)。

2.6K30

【Hybrid】518- 12种移动端 H5 与 Hybrid问题汇总

产生原因 为什么会产生 click 延时? iOS 中的 safari,为了实现双击缩放操作,单击 300ms 之后,如果未进行第二次点击,则执行 click 单击操作。...但是, App 中,无论是否需要双击缩放这种行为,click 单击都会产生 300ms 延迟。 为什么会产生 click 点击穿透?...那么,是否可以将 click 事件全部替换成 touchstart 呢?为什么开源框架还会给出 click 事件呢? 我们想象一种情景,同时需要点击滑动的场景下。...解决方案 解决方法:添加一层蒙层,做分享引导。 因为页面内部点击分享按钮无法直接调用,而分享功能需要点击右上角更多来操作。 然后用户可能不知道通过右上角小标里面的功能分享。...分为两种场景,一种是开发测试时调试,一种是生产环境上调试。 为什么有生产环境上调试呢?有些时候测试环境没法复现这个 bug,测试环境生产环境不一致,此时就需要紧急生产调试。

1.3K22

吃透移动端 H5 与 Hybrid|实践踩坑12种问题汇总

产生原因 为什么会产生 click 延时? iOS 中的 safari,为了实现双击缩放操作,单击 300ms 之后,如果未进行第二次点击,则执行 click 单击操作。...但是, App 中,无论是否需要双击缩放这种行为,click 单击都会产生 300ms 延迟。 为什么会产生 click 点击穿透?...微信公众号 H5 开发中,页面内部点击分享按钮调用 SDK,方法不生效。...解决方案 解决方法:添加一层蒙层,做分享引导。 因为页面内部点击分享按钮无法直接调用,而分享功能需要点击右上角更多来操作。 然后用户可能不知道通过右上角小标里面的功能分享。...分为两种场景,一种是开发测试时调试,一种是生产环境上调试。 为什么有生产环境上调试呢?有些时候测试环境没法复现这个 bug,测试环境生产环境不一致,此时就需要紧急生产调试。

1.2K30

吃透移动端 H5 与 Hybrid|实践踩坑12种问题汇总

产生原因 为什么会产生 click 延时? iOS 中的 safari,为了实现双击缩放操作,单击 300ms 之后,如果未进行第二次点击,则执行 click 单击操作。...但是, App 中,无论是否需要双击缩放这种行为,click 单击都会产生 300ms 延迟。 为什么会产生 click 点击穿透?...那么,是否可以将 click 事件全部替换成 touchstart 呢?为什么开源框架还会给出 click 事件呢? 我们想象一种情景,同时需要点击滑动的场景下。...解决方案 解决方法:添加一层蒙层,做分享引导。 因为页面内部点击分享按钮无法直接调用,而分享功能需要点击右上角更多来操作。 然后用户可能不知道通过右上角小标里面的功能分享。...分为两种场景,一种是开发测试时调试,一种是生产环境上调试。 为什么有生产环境上调试呢?有些时候测试环境没法复现这个 bug,测试环境生产环境不一致,此时就需要紧急生产调试。

2K20

C# WPF MVVM开发框架Caliburn.Micro入门介绍①

02 以下是一个关于Caliburn.Micro简短的列表: Action消息: 操作机制允许您将UI触发器(如按钮的“单击”事件)“绑定”到视图模型或演示器的方法。该机制还允许向方法传递参数。...因此,如果您在ViewModel上有一个名为“Save”的方法,UI中有一个名为“Save”的按钮,我们将自动为“Click”事件创建一个EventTrigger,并为“Save”方法分配一个ActionMessage...您甚至可以更改或添加不同控件的约定。例如,如果您确实需要,您可以为按钮“MouseMove”而不是“Click”创建约定事件。 Binding 约定 我们还支持基于约定的数据绑定。...Bootstrapper引导程序 配置此框架并使其启动运行需要什么?...事实,我Caliburn.Micro中所做的改进正在被重新折叠到Caliburn v2中。那有什么好处?

1.7K20

FL水果2023最新中文版本有哪些新功能变化? FL STUDIO21

添加音轨(Adding tracks)-播放列表剪辑焦点区域新增一个 [+] 按钮,通过左键右键单击选项添加乐器音频音轨。...04通道机架通道按钮单击右键)Channel Button (Right-Click)-新的“补丁”选项将当前实例转换为补丁格式。...06浏览器(改进)标签(Tags)-单击标签(底部)打开更多选项。偏好(Favoriting)-单击鼠标切换内容的星号。...样本预览面板显示采样率、比特深度立体声元数据。选项(Option)-“选项卡显示图标和文本”。浏览器(Browser)-为选项卡添加“冻结”选项。...“冻结”时,浏览器停止保存状态(文件夹是否折叠)。“折叠结构”按钮起到“恢复为冻结状态”的作用。07钢琴卷视图(View)-更换音符时自动滚动钢琴窗。

87410

12个关于移动 H5 开发的采坑问题汇总

产生原因 为什么会产生 click 延时? iOS 中的 safari,为了实现双击缩放操作,单击 300ms 之后,如果未进行第二次点击,则执行 click 单击操作。...但是, App 中,无论是否需要双击缩放这种行为,click 单击都会产生 300ms 延迟。 为什么会产生 click 点击穿透?...微信公众号 H5 开发中,页面内部点击分享按钮调用 SDK,方法不生效。...解决方案 解决方法:添加一层蒙层,做分享引导。 因为页面内部点击分享按钮无法直接调用,而分享功能需要点击右上角更多来操作。 然后用户可能不知道通过右上角小标里面的功能分享。...分为两种场景,一种是开发测试时调试,一种是生产环境上调试。 为什么有生产环境上调试呢?有些时候测试环境没法复现这个 bug,测试环境生产环境不一致,此时就需要紧急生产调试。

1.5K20

js事件防止冒泡

如今,单击button不会再折叠样式转换器。而单击边框则会触发折叠操作。可是,单击标签相同什么也不会发生,由于它也是一个后代元素。实际。...这样一来,单击button的事件会被button处理。并且仅仅会被button处理。 单击样式转换器的其它地方则能够折叠扩展整个区域。 3. ...默认操作 假设我们把单击事件处理程序注冊到一个锚元素,而不是一个外层的,那么就要面对另外一个问题:当用户单击链接时。浏览器会载入一个新页面。...事件传播默认操作是相互独立的两套机制,二者不论什么一方发生时,都能够终止还有一方。假设想要同一时候停止事件传播默认操作,能够事件处理程序中返回false。...这是对事件对象同一时候调用.stopPropagation().preventDefault()的一种简写方式。

2.4K40

AngularDart Material Design 扩展面板 顶

一个或多个面板扩展面板集中组合在一起。 单击面板时,面板内容将展开。 面板由名称,值,可选的辅助文本展开的面板内容组成。...Attributes: wide - 指定展开时面板的宽度,比折叠时的宽度略宽。 flat - 表示面板展开时不应“浮动”或与其他面板分离。...cancelDisplayed bool  默认情况下,设置小部件是否应显示取消按钮为真的选项。 cancelText String  要在取消按钮显示的文本。...saveDisabled bool  是否禁用了保存按钮。 saveText String  要在保存按钮显示的文本。 例如:“Ok”,“Apply”等。默认值为“Save”。...展开MaterialExpansionPanel时,其外部的任何单击都将自动折叠面板。

1.8K20

人工智能|基于 TensorFlow.js 的迁移学习图像分类器

使用它可以浏览器创建CNN(卷积神经网络)、RNN(循环神经网络)等等,且可以使用终端的GPU处理能力训练这些模型。...我们将使用一个叫做 "K-Nearest NeighborsClassifier" 的模块,他将有效的让我们把摄像头采集的图像(实际是 MobileNet 中的激活值)分成不同的类别,当用户要求做出预测时...每次单击其中一个 "Add" 按钮,就会向该类添加一个图像作为训练实例。当你这样做的时候,模型会继续预测网络摄像头的图像,并实时显示结果。...Google Chrome浏览器清除历史记录和缓存:转到“自定义控制”(Chrome浏览器右上角) – >然后单击“设置” –>单击下面的“显示高级设置”按钮 – >然后到“隐私”部分 – >点击“清除浏览数据...”按钮 – >检查新弹出窗口中的所有框 – >然后单击“清除浏览数据”按钮

1.2K41

如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

用户可通过打开工具箱并将InputDateTime控件添加到设计图面,单击“编辑”工具栏的“移”按钮以交换两个控件的位置。...此外,您还可以使用WijmoJS设计器查看并选择不同WijmoJS 主题效果。 单击WijmoJS 徽标以关闭工具箱,单击主题以显示可用主题列表,然后单击其他值,例如Cerulean。...如果要保存设计器布局以供将来使用,请使用主工具栏的“保存”按钮将当前状态写入JSON文件,然后使用主工具栏的“打开”按钮重新加载所选文件的内容。...我们这样做之前,让我们看看设计师生成的默认系列集合。 “属性”窗格中向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。 将鼠标悬停在最新价格,然后单击出现的链接。...name属性(图表图例中显示)具有适当的大小写单词之间的空格。 单击后退按钮返回FlexChart设置,然后像以前一样展开系列属性。 现在单击“添加项目”链接以将新图表系列添加到集合的末尾。

5.8K20

Excel编程周末速成班第21课:一个用户窗体示例

当然,用户总是可以直接将数据输入到工作表中,那么为什么要为此目的创建程序用户窗体呢?有以下几个原因: 用户疲劳。...使用窗体设计器的格式化命令工具来根据需要排列调整控件的大小。完成的设计应该类似于图21-2。 ? 图21-2:放置所有控件之后的窗体 这是检查窗体控件的选项顺序的好时机。...或者,如果选择了“完成”按钮,则关闭窗体。你可以看到,当用户单击“下一步”或“完成”按钮时,将执行验证。因此,不应将验证代码放在按钮Click事件过程中,而应放在它自己的过程中。...如果你创建了将数据从窗体传输到工作表的过程,则“完成”“下一步”按钮Click事件过程都可以调用此过程。 同时,该窗体需要代码以清除其控件中的所有数据。...当然,单击“下一步”按钮时,这是必需的,单击“取消”或“完成”按钮时,这也是必需的。即使使用Hide方法隐藏了该窗体,它在下次显示时仍将所有数据保留在其控件中。因此,需要清除控件。

6K10

基于vue2.0+vuex+localStorage开发的本地记事本

兼容PC端移动端。...(取消勾选checkbox) 已取消 -> 未完成(点击恢复按钮) 支持控制台打印所有事件数据 支持筛选事件 支持编辑事件 支持删除事件 支持清空所有事件 支持本地化存储 支持折叠面板 项目笔记 本项目是使用...难点:点击折叠面板title,要动画实现sliderUpsliderDown,但是div高度auto,使用transition: height .3s无效。...} 2.切换状态 难点:不同的状态间切换,实时地把事件不同状态列表中显示出来 解决方法:利用vuex进行状态管理,把所有事件状态存储store对象中,组件中通过计算属性获得事件... 关键词 进行筛选 知识点:返回所有事件的计算属性,使用过滤器( filter ),进行对 type content 的筛选,返回符合条件的事件。

1.1K60

基于vue2.0+vuex+localStorage开发的本地记事本

) 已取消 -> 未完成(点击恢复按钮) 支持控制台打印所有事件数据 支持筛选事件 支持编辑事件 支持删除事件 支持清空所有事件 支持本地化存储 支持折叠面板 项目笔记 本项目是使用vue-cli脚手架生成的项目...,项目代码可以到我的githubclone下来。...难点:点击折叠面板title,要动画实现sliderUpsliderDown,但是div高度auto,使用transition: height .3s无效。...} 2.切换状态 难点:不同的状态间切换,实时地把事件不同状态列表中显示出来 解决方法:利用vuex进行状态管理,把所有事件状态存储store对象中,组件中通过计算属性获得事件... 关键词 进行筛选 知识点:返回所有事件的计算属性,使用过滤器( filter ),进行对 type content 的筛选,返回符合条件的事件。

57930
领券