php 屏蔽页面鼠标右键,Javascript实现鼠标右键自定义特色菜单

JS屏蔽鼠标右键的两种方法,比较常用的一个JS小功能,用上这个代码后,浏览者在访问你网页的时候就不能点击右键了,点了也不会弹出右键菜单,本功能最好不要用的太多哦,有时候用户会反感的。

代码如下:<html>

<head>

<title>屏蔽鼠标右键</title>

</head>

<body οncοntextmenu=self.event.returnvalue=false>

第一种方法:在body标签里加上οncοntextmenu=self.event.returnvalue=false;

<br>

<script language="javascript">

<!--

function document.oncontextmenu()

{

return false;

}

function nocontextmenu()

{

if(document.all) {

event.cancelBubble=true;

event.returnvalue=false;

return false;

}

}

-->

</script>

第二种方法:在body里加入οnmοusedοwn="rclick()" οncοntextmenu= "nocontextmenu()"

<br>

<script language="javascript">

<!--

function rclick()

{

if(document.all) {

if (event.button == 2){

event.returnvalue=false;

}

}

}

-->

</script>

<br>详细情况请查看代码。<br>

<br>现在点击你的鼠标右键,不起作用了。

</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

,两种JS实现屏蔽鼠标右键的方法,

"

在Web端,通常是不需要右键菜单,各个浏览器也有自己的右键菜单。但是对于一些特殊的网页,是需要右键菜单来增加用户体验的,比如百度音乐,QQ邮箱,相信大家都在Web端使用过右键菜单了,现在来分享一下如何实现,比较简单。

运行代码:window.onload = function() {

document.oncontextmenu = block;

document.body.onmouseup = function(event) {

if (!event) event = window.event;

if (event.button == 2) {

var x = event.pageX || event.clientX;

var y = event.pageY || event.clientY;

document.getElementById("contextMenu").style.left = x "px";

document.getElementById("contextMenu").style.top = y "px";

document.getElementById("contextMenu").style.display = "block";

}

}

//阻止事件冒泡

document.getElementById("contextMenu").onclick = function(event) {

event.stopPropagation();

}

//点击其他地方隐藏

document.onclick = function() {

document.getElementById("contextMenu").style.display = "none";

}

for (var i = 0; i < getElementsByClassName("contextMenuItem").length; i ) {

getElementsByClassName("contextMenuItem")[i].onclick = function(event) {

event = event ? event : window.event

var target = event.srcElement ? event.srcElement : event.targe;

document.getElementById("contextMenu").style.display = "none";

//alert("您点击了: " target.innerHTML);

}

}

}

function block(event) {

if (window.event) {

event = window.event;

event.returnValue = false;

} else event.preventDefault();

}

//兼容IE不支持getElementsByClassName

function getElementsByClassName(className, root, tagName) {

if (root) {

root = typeof root == "string" ? document.getElementById(root) : root;

} else {

root = document.body;

}

tagName = tagName || "*";

if (document.getElementsByClassName) {

return root.getElementsByClassName(className);

} else {

var tag = root.getElementsByTagName(tagName);

var tagAll = [];

for (var i = 0; i < tag.length; i ) {

for (var j = 0, n = tag[i].className.split(" "); j < n.length; j ) {

if (n[j] == className) {

tagAll.push(tag[i]);

break;

}

}

}

return tagAll;

}

}

效果图:

8fddeafa7271d359b63a6aaf4de43c52.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中实现自定义鼠标右键菜单,你可以借助第三方插件或者自己编写代码来实现。下面是一个使用第三方插件 `vue-contextmenu` 的示例: 首先,安装 `vue-contextmenu` 插件: ```shell npm install vue-contextmenu ``` 然后,在你的Vue项目中,导入并注册 `vue-contextmenu` 插件: ```javascript import VueContextmenu from 'vue-contextmenu'; Vue.use(VueContextmenu); ``` 接下来,在需要添加右键菜单的元素上使用 `v-contextmenu` 指令,并绑定一个方法来定义菜单的内容和行为: ```html <template> <div> <div v-contextmenu="contextMenu"> Right-click me! </div> </div> </template> <script> export default { data() { return { contextMenu: [ { text: '菜单项1', action: 'menuItem1' }, { text: '菜单项2', action: 'menuItem2' }, { text: '菜单项3', action: 'menuItem3' } ] }; }, methods: { menuItem1() { console.log('执行菜单项1的操作'); }, menuItem2() { console.log('执行菜单项2的操作'); }, menuItem3() { console.log('执行菜单项3的操作'); } } }; </script> ``` 在这个例子中,`contextMenu` 数组定义了右键菜单的内容,每个菜单项都有一个 `text` 属性用于显示菜单项的文本,以及一个 `action` 属性用于定义菜单项被点击时要执行的方法。 运行项目后,当你在指定的元素上右键点击时,就会弹出自定义右键菜单,并执行相应的方法。 除了使用第三方插件外,你也可以根据需求自己编写代码来实现自定义鼠标右键菜单。这需要使用原生JavaScript事件来捕获右键点击事件,并自定义菜单的样式和行为。 希望对你有所帮助!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值