Question

我创建了一个上下文菜单项，但它并不是一直都能运行。例如，当我点击暂停时，它会暂停，当我点击播放时，它会再次播放，然后再次发生这种情况。在那之后，当我点击它时它什么都不做。然后，它回到它开始的地方。这是我的代码：

<script>
    var x = 1;
</script> 
<script>
    // JAVASCRIPT (jQuery)

    // Trigger action when the contexmenu is about to be shown
    $(document).bind("contextmenu", function (event) {

        // Avoid the real one
        event.preventDefault();

        // Show contextmenu
        $(".custom-menu").finish().toggle(100).

        // In the right position (the mouse)
        css({
            top: event.pageY + "px",
            left: event.pageX + "px"
        });
    });


    // If the document is clicked somewhere
    $(document).bind("mousedown", function (e) {

        // If the clicked element is not the menu
        if (!$(e.target).parents(".custom-menu").length > 0) {

            // Hide it
            $(".custom-menu").hide(100);
        }
    });


    // If the menu element is clicked
    $(".custom-menu li").click(function(){

        // This is the triggered action name
        switch($(this).attr("data-action")) {

            // A case for each action. Your actions here
            case "first": alert("first"); break;
            case "second": alert("second"); break;
            case "third": alert("third"); break;
        }

        // Hide it AFTER the action was triggered
       $(".custom-menu").hide(100);
      });
</script>
<script>
    function changeContextMenuIn() {

</script>
<style>
     /* CSS3 */
    /* The whole thing */
    .custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
    }
    /* Each of the items in the list */
    .custom-menu li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
    }
    .custom-menu li:hover {
    background-color: #DEF;
    }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<video width="640" id="vidPlayerMain" autoplay="" controls="" onclick="if (x == 1) {document.getElementById('vidPlayerMain').pause(); document.getElementById('pauseContextMenu').innerHTML='Play'; x = 0;} else {document.getElementById('vidPlayerMain').play(); document.getElementById('pauseContextMenu').innerHTML='Pause'; x = 1;}" name="media">
    <source src="https://video-lax1-1.xx.fbcdn.net/hvideo-xpa1/v/t42.1790-2/1063787_495053737243964_500266464_n.mp4?efg=eyJybHIiOjYzNSwicmxhIjo3MzZ9&rl=635&vabr=353&oh=d763b8ecfa2a823b9971c497732e4b69&oe=55C8F2C9" type="video/mp4">
</video>
<br />
<ul id='contextMenu' class='custom-menu'>
    <li data-action="first"><a href="javascript:if (x == 1) {document.getElementById('vidPlayerMain').pause(); document.getElementById('pauseContextMenu').innerHTML='Play'; x = 0;} else if (x == 0) {document.getElementById('vidPlayerMain').play(); document.getElementById('pauseContextMenu').innerHTML='Pause'; x = 1;}; $('.custom-menu').hide(100);" style="text-decoration:none; color:#333;" id="pauseContextMenu">Pause</a></li>
</ul>

Answer 1

这是因为暂停和播放视频的功能被绑定到contextMenu＆lt; a＆gt;。元素，但警告数据 - 动作属性的功能绑定到contextMenu＆＃39; s＆lt; li＆gt;元素和＆lt; a＆gt;元素没有完全占据＆lt; li＆gt;的宽度和高度。元件。（当您单击其占据文本区域之外的上下文菜单按钮时，视频不会播放/暂停）

对此的一个简单解决方案是更改这两个元素的CSS，使得＆lt; a＆gt;元素占据整个宽度和高度。

CSS：

/* CSS3 */
/* The whole thing */
.custom-menu {
    display: none;
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
}
/* Each of the items in the list */
.custom-menu li {    
    cursor: pointer;
    list-style-type: none;
}
.custom-menu li:hover {
    background-color: #DEF;
}
.custom-menu li a {
    padding: 8px 12px;
    display:inline-block;
}

为什么上下文菜单在某些时候不起作用？

1 个答案: