仅使用Javascript在菜单外单击时如何关闭菜单?

时间:2019-04-15 19:21:39

标签: javascript dom-events

我正在尝试编写一个Greasemonkey脚本,以使使用我需要使用的所有工具的工作变得更容易。当我在菜单外单击或使用与打开菜单相同的按钮时,菜单应关闭或消失。

该脚本需要与现有页面进行交互,并保持简单,我只想使用Javascipt。

这是我目前拥有的:

// ==UserScript==
// @name    Tool Linker
// @grant   none
// @include https://en.wikipedia.org/*
// @include https://www.wikipedia.org/
// ==/UserScript==

function addCss(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}

addCss('button {position: fixed; z-index: 1000; bottom: 0.6%; height:  2.8%; width: 7%; border-radius: 3px; font-family: arial; background: #FFFAF0;}');

addCss('menu-ca {position: fixed; z-index: 1000; overflow: hidden; bottom: 3.2%; height: 60%; width: 30%; border-style: solid; border-color: #CCCCCC; border-width: 1px; border-radius: 1%; margin: 0.1%; font-family: arial; background: #F2F2F2;}');

var btn = document.createElement("button");   
btn.innerHTML = "Tool Linker";                  
document.body.appendChild(btn);

var menu = document.createElement("menu-ca");

btn.addEventListener('click', function(){
document.body.appendChild(menu);
});

window.addEventListener('click', function(event){
if(event.target != menu){
document.body.removeChild(menu);
  }
});

中间乱七八糟的是CSS,为了显示为代码:(我无法正确地张贴它,而最后一种方法是我试图关闭菜单的方法;它确实如果最后一种方法被删除,则当您单击按钮时,将显示菜单。

0 个答案:

没有答案