var words = $( "p" ).first().text().split( /\\s+/ );
var text = words.join( "\</span\> \<span\>" );
$( "p" ).first().html( "\<span\>" + text + "\</span\>" );
$( "span" ).on( "click", function() {
$( this ).css( "background-color", "red" );
});
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>rebaz</title>
<link rel="stylesheet" href="style.css" />
</head>
<body class = "card" >
<p >This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.
</p>
<div class="custom-context-menu"> <ul>
<a><li id="html" >rule</li> </a></ul>
<ul> <a><li id="html" >slde</li> </a></ul>
<ul> <a><li id="html" >rebaz</li> </a></ul></div>
<script>
var words = $( "p" ).text().split( /\s+/ );
var text = words.join( "</span> <span>" );
$( "p" ).first().html( "<span>" + text + "</span>" );
$( "span" ).on( "click", function() {
$( this ).css( "background-color", "red" );
});
var card = document.querySelector("span");
var customContextMenu = document.querySelector(".custom-context-menu");
card.addEventListener("touchend", (e) => {
e.preventDefault();
let topPosition = e.clientY;
let leftPosition = e.clientX;
customContextMenu.classList.add("active");
customContextMenu.style.left = leftPosition + "px";
customContextMenu.style.top = topPosition + "px";
});
window.addEventListener("click", () => {
customContextMenu.classList.remove("active");
});
</script>
</body>
</html>
1条答案
按热度按时间xxb16uws1#
像这样？
为了关闭上下文菜单，我使用了一个背景，这是一个div，它覆盖了上下文菜单之外的所有内容，当它被点击时，它会关闭自己和上下文菜单，你尝试的方式，点击窗口不会工作，因为点击一个单词会触发它，上下文菜单会同时打开和关闭。
同样，当你使用jquery时，我把所有东西都转换成了jquery，监听器和选择器。