jquery 禁用瀏覽器右鍵菜單,局部div不禁用

jquery禁用瀏覽器右鍵,局部div不禁用。

操作:在class爲a1/a2/tbox的地方點擊鼠標右鍵,要可以出來右鍵菜單。在tbox1中點擊鼠標右鍵要禁止鼠標右鍵菜單。

html:

<body>
    <div>
        <div class="tbox1">
            這塊內容要禁用瀏覽器鼠標右鍵
        </div>
        <div class="tbox">
            <div class="a1">
                在這塊div點擊鼠標右鍵
            </div>
            <div class="a2">
                同級div
            </div>
        </div>
    </div>
</body>

jquery:

$(document).contextmenu(function(e) {
    // console.log(this)
    // console.log(e)
    // console.log(e.target)
    if($(e.target).hasClass("tbox")||$(e.target).parents(".tbox").hasClass("tbox")){
        return true;//不禁止
    }else{
        return false;//禁止
    }
})

拓展:

還可以使用ouseDown 和 e.which實現

$(document).mousedown(function(e) {
    //e.which 1爲鼠標左鍵 2爲鼠標中鍵 3爲鼠標右鍵
    if (e.which == 3) {
        console.log('this' + this)
        console.log('e' + e)
        console.log('e.target' + e.target)
        if($(e.target).hasClass("tbox")||$(e.target).parents(".tbox").hasClass("tbox")){
                return true;//不禁止
        }else{
                return false;//禁止
        }
    }
})

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章