首页 新闻 搜索 专区 学院

js火狐浏览器怎么用右键弹出一个div

0
悬赏园豆:15 [已解决问题] 解决于 2013-07-21 11:36

js火狐浏览器怎么用右键弹出一个div,跟一个菜单栏差不多,急求。。。

没发光的钻石的主页 没发光的钻石 | 初学一级 | 园豆:132
提问于:2013-07-15 20:55
< >
分享
最佳答案
0

给你写了个简单的例子,注释也写明了!

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>禁用和改写鼠标右键</title>
<style type="text/css">
.MouserNemu{display:none; position:absolute; border:1px solid #CCC; background:#ddd}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function(){
    //禁用鼠标右键菜单
    $(document).bind("contextmenu", function(e){ return false; })
    //绑定点击右键显示菜单
    $(document).bind('mousedown',ShowMouse);
    $('.MouserNemu').hover(function(){
        //菜单出来后移上去点左健不会隐藏当前菜单
        $(document).unbind('mousedown');
    },function(){
        //移出后点击其它区域则隐藏菜单
        $(document).bind('mousedown',ShowMouse);
    })
});
function ShowMouse(e){
    //(e.which); // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
    switch(e.which){
        case 1:
            //鼠标左键隐藏菜单
            $('.MouserNemu').hide();
            break;
        case 2: break;
        case 3:
            //鼠标右键显示菜单
            $('.MouserNemu').show().css({'left':e.pageX,'top':e.pageY});
            break;
    }
    return false;   
}
</script>
</head>

<body>
<div class="MouserNemu">
    鼠标右键菜单
</div>
</body>
</html>

收获园豆:15
三国灰鼠 | 菜鸟二级 |园豆:251 | 2013-07-16 15:49

出来了,但这个貌似点哪都能出来,我想在某个div里才能点出来,其它地方屏蔽右键。。

没发光的钻石 | 园豆:132 (初学一级) | 2013-07-16 22:03

@没发光的钻石: 把document改成你div的class名称就可以了

三国灰鼠 | 园豆:251 (菜鸟二级) | 2013-07-16 22:15

@三国灰鼠: 不行啊,你看我这样改了以后除非点那个div,右键菜单才会消失,点击其他地方不管左键右键他就是不隐藏,想让他点击其他地方就隐藏

$(function(){
    //禁用鼠标右键菜单
    $(document).bind("contextmenu", function(e){ return false; })
    //绑定点击右键显示菜单
    $(".aa").bind('mousedown',ShowMouse);
    $('.MouserNemu').hover(function(){
        //菜单出来后移上去点左健不会隐藏当前菜单
        $(".aa").unbind('mousedown');
    },function(){
        //移出后点击其它区域则隐藏菜单
        $(".aa").bind('mousedown',ShowMouse);
    })
});
//要点击的div
<div  class="aa">bbbb</div>
没发光的钻石 | 园豆:132 (初学一级) | 2013-07-17 00:23

@没发光的钻石: <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>禁用和改写鼠标右键</title>
<style type="text/css">
.MouserNemu{display:none; position:absolute; border:1px solid #CCC; background:#ddd}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function(){
    //禁用鼠标右键菜单
    $(document).bind("contextmenu", function(e){ return false; })
    //绑定点击右键显示菜单
    $(document).bind('mousedown',ShowMouse);
    $('.aa').bind('mousedown',ShowMouse);
    $('.MouserNemu').hover(function(){
        //菜单出来后移上去点左健不会隐藏当前菜单
        $('.aa').unbind('mousedown');
    },function(){
        //移出后点击其它区域则隐藏菜单
        $('.aa').bind('mousedown',ShowMouse);
    })
    
});
function ShowMouse(e){    
    //(e.which); // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
    switch(e.which){
        case 1:
            //鼠标左键隐藏菜单
            $('.MouserNemu').hide();
            break;
        case 2: break;
        case 3:
            if(e.target!='[object HTMLBodyElement]'){                
                //鼠标右键显示菜单
                $('.MouserNemu').show().css({'left':e.pageX,'top':e.pageY});
            }
            break;
    }
    return false;   
}
</script>
</head>

<body>
<div class="aa" style="width:500px; height:500px; background:#000"></div>
<div class="MouserNemu">
    鼠标右键菜单
</div>
</body>
</html>


三国灰鼠 | 园豆:251 (菜鸟二级) | 2013-07-17 07:39

@三国灰鼠: 还是不行,点div同一个高度上的其他地方右键会屏蔽,但点击div不在同一高度的其它地方右键不会被屏蔽,。。。。我是用火狐测试的。。

没发光的钻石 | 园豆:132 (初学一级) | 2013-07-17 18:24

@没发光的钻石: 好了, 把这个   $(document).bind('mousedown',ShowMouse);删掉就好了,谢了

没发光的钻石 | 园豆:132 (初学一级) | 2013-07-21 11:36
其他回答(2)
0

http://www.cnblogs.com/tonywan/archive/2009/04/23/1441982.html

 

看下 这个

Tom.汤 | 园豆:2172 (老鸟四级) | 2013-07-16 07:54
0

css+div 定位.捕捉鼠标右键时间触发 show出来. 点击document .只要不再菜单范围,hide它

邢少 | 园豆:10926 (专家六级) | 2013-07-16 08:55

不好意思,看不懂, 具体代码可以写下吗?

支持(0) 反对(0) 没发光的钻石 | 园豆:132 (初学一级) | 2013-07-16 11:03
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册