bootstrap按钮插件无法设置点击事件

Posted 2023-03-25

就是这种按钮，有人试过吗，咋解决啊

Bootstrap的下拉菜单一直都是需要点击，才会显示出来，可能不太符合大家的使用习惯，可能有的用户都不知道这个可以点击，国外的一个开发者写了一个插件，能将点击事件切换为Hover鼠标悬停事件，这样节约了用户的操作和时间。Bootstrap Hover Dropdown是一个非官方的Bootstrap插件，使Bootstrap下拉菜单激活悬停和提供更好的用户体验，当前版本支持最新版的Bootstrap 3，所以不必担心使用兼容的问题。可以下载并解压缩下载包从GitHub。或者，可以下载文件通过鲍尔（javascript的包管理系统）：这也将自动安装Bootstrap和jQuery插件，如果需要。一旦已经下载的文件，在代码文件最后引入Bootstrap的js文件（S）即可：就像使用Bootstrap一样，可以激活它，没有任何的JavaScript，只要添加一个数据属性，可以让它自动工作。添加data-hover="dropdown"到标签中，如果已经使用Bootstrap，可以替换Bootstrap的data-toggle="dropdown"。可以通过数据属性设置选项，也可以通过data-delay和data-close-others来设置选项。这是一个标准的例子：或者，可以通过JavaScript初始化：这没有任何其他配置自启动已经支持此功能菜单也可以。只使用以前使用的标记。只有顶部的标签需要任何特殊标记为我的插件工作。delay: (可选参数) 在毫秒的延迟。这是等待的时间之前关闭下拉当鼠标不再在下拉菜单或按钮/导航项目，激活它。默认值 500。instantlyCloseOthers: (可选参数) 一个布尔值，如果为真，将立即关闭所有其他下拉菜单的使用当您启动一个新的选择器匹配导航。当你有这么近，可以重叠的很好。 默认值 true。hoverDelay: (可选参数) 开幕前在毫秒的延迟。有些人认为这提高了用户体验，因为它减少了意外的菜单口数量。默认值 0。 参考技术A 回答的有点晚，不知道解决了没。我最近也是遇到了这个问题，我是给$('#edit').wysiwyg("#engForm");传了一个外层div的参数，然后修改了下bootstrap-wysiwyg.js:原来toolbarBtnSelector=$('a[data-'+options.commandRole+'],button[data-'+options.commandRole+'],input[type=button][data-'+options.commandRole+']');.on('mouseupkeyupmouseout',function()saveSelection();updateToolbar(););改为：toolbarBtnSelector=$(userOptions).find('a[data-'+options.commandRole+'],button[data-'+options.commandRole+'],input[type=button][data-'+options.commandRole+']');.on('mouseupkeyupmouseout',function()saveSelection(););

bootstrap的popover插件在focus模式时在Safari浏览器无法使用的bug解决方案

前言

最近在使用bootstrap的popover插件，效果如下：

 

popover插件的focus模式时表现为当点击按钮时弹出浮动层，在点击浮动层外的任何一处，都隐藏浮动层。

但是在mac下的Safari浏览器中无法弹出浮动层，bug导致原因未知，官方demo也是如此。

解决方案

最后反复试验，发现一种解决方案，非常简单，即在给按钮绑定鼠标事件，然后手动触发dom的focus事件，也就连带触发了popover插件的显示事件。

var $btn=$(".btn");
$btn.mouseup(function(){
    $btn.focus();
})
$btn.popover({
    title: "",
    placement:"bottom",
    content: "xxxxxxxxxxxx",
    trigger:"focus",
    html:true,
});