js阻止默认右键的下拉菜单方法

需求

正常情况下，我们有可能遇到需要右键不显示下拉菜单的情况，让页面显得更加软件话，删除多余的功能，增加性能。

实现代码

 document.oncontextmenu = function (event) {
  event.preventDefault();
 };

在触发右键下拉菜单的时候，直接阻止掉浏览器的默认事件，就实现了该效果。

以上这篇js阻止默认右键的下拉菜单方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现禁止鼠标右键的功能

    遇到网页上有精美图片或者精彩文字想保存时,通常大家都是选中目标后按鼠标右键,在弹出菜单中选择"图片另存为"或"复制"来达到我们的目的.但是,目前有许多网页都屏蔽了鼠标右键,那么用js如何实现禁止鼠标右键的功能呢? 1.与禁止鼠标右键相关的JS说明 <script type="text/javascript"> document.oncontextmenu=new Function("event.returnValue=fal

  • js为鼠标添加右击事件防止默认的右击菜单弹出

    复制代码 代码如下: <script language="javascript"> /*document.oncontextmenu=Youji;*/ //为当前文档添加鼠标右击事件,防止默认的右击菜单弹出 function Youji() { alert("右击成功!"); return false; } //为某个dom元素添加鼠标右击事件 window.onload = function(){ document.getElementById(&qu

  • js阻止默认右键的下拉菜单方法

    需求 正常情况下,我们有可能遇到需要右键不显示下拉菜单的情况,让页面显得更加软件话,删除多余的功能,增加性能. 实现代码 document.oncontextmenu = function (event) { event.preventDefault(); }; 在触发右键下拉菜单的时候,直接阻止掉浏览器的默认事件,就实现了该效果. 以上这篇js阻止默认右键的下拉菜单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • JS+CSS相对定位实现的下拉菜单

    JS+CSS相对定位实现的下拉菜单

    本文实例讲述了JS+CSS相对定位实现的下拉菜单.分享给大家供大家参考.具体如下: 这里使用的是相对定位,不过效果还可以,用时候再修整一下,这个只是实现了大概功能,还有许多细节没有修饰. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-ab-fix-menu-codes/ 具体代码如下: <html> <head> <title>非定位CSS+Js下拉菜单</title> <style&g

  • JS实现的Select三级下拉菜单代码

    JS实现的Select三级下拉菜单代码

    本文实例讲述了JS实现的Select三级下拉菜单.分享给大家供大家参考.具体如下: 这里使用js实现Select三级下拉菜单,比如全国省市城市选择.数码类产品分类.人才类别选择等,都比较具有代表性,在表单中容易使用Select下拉列表菜单供用户选择,当然,自己用还是需要稍微改动的,比如至少菜单内容要改成自己需要的,其它的好说. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3-select-menu-codes/ 具体代码如下: <ht

  • JS实现快速的导航下拉菜单动画效果附源码下载

    JS实现快速的导航下拉菜单动画效果附源码下载

    这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 查看演示     下载源码 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav<span aria-hidden=&qu

  • js实现select二级联动下拉菜单

    本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.

  • 浅谈Vue.js中如何实现自定义下拉菜单指令

    浅谈Vue.js中如何实现自定义下拉菜单指令

    我们利用  Vue.js 的自定义指令能力,来实现一个自定义下拉菜单功能.描述如下: 点击按钮,弹出下拉菜单. 点击下拉菜单之外的区域,关闭下拉菜单. 1基础版 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="styleshee

  • Js点击弹出下拉菜单效果实例

    复制代码 代码如下: <STYLE type=text/css> .menu { BORDER-RIGHT: #006080 2px solid; BORDER-TOP: #80e0ff 2px solid; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #80e0ff 2px solid; BORDER-BOTTOM: #006080 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR:

  • js动态设置select下拉菜单的默认选中项实例

    利用javascript设置select下拉菜单的选中项. 代码实例如下: <!--js动态设置select下拉菜单的默认选中项--> <html> <head> <title>下拉菜单</title> <script type="text/javascript"> window.onload=function(){ var osel=document.getElementById("selID"

  • 最简单js代码实现select二级联动下拉菜单

    本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.

  • JS组件Bootstrap实现下拉菜单效果代码

    JS组件Bootstrap实现下拉菜单效果代码

    Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互.使用下拉菜单(Dropdown)插件,您可以向任何组件(比如导航栏.标签页.胶囊式导航菜单.按钮等)添加下拉菜单. 如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以切换下拉菜单(Dropdown)插件的隐藏内容:

随机推荐