Question

使用angularjs或jquery，只要用户右键单击画布区域内的鼠标，我怎么能隐藏html部分“sec1”？当用户点击鼠标左键并反之时，再次显示它？我知道我可以使用$ event.which，但我很少感到困惑谢谢

<body
         ng-app="appMyExample" 
         ng-controller="MainCtrl" background="images.jpe">
        
    <h2>title</h2>
    
        <canvas 
            ng-mousedown="defineSquare($event)"
            oncontextmenu="return false"
            id="GLCanvas" width="300" height="200" style="border:2px solid #e3d3d3;">
            Your browser does not support the HTML5 canvas.
        </canvas>
    <br>
    <b>Total on screen:</b><input type="text" value="0" id="total">
    <b>Erase<input type="radio" value="Erase"></b><input type="text" value="0" id="erase">
    <br>
    <section id="sec1">
        <css-timer id="idMainControllerTimer"
               interval="40"
               timeron="true"
               callback="mainTimerHandler"></css-timer>
    </section>
        <div ng-controller="MainCtrl">
            <input type="radio" ng-model="mSelection" name="shape" value="Square" ng-change="swap(1)" checked="checked">Square
            <input type="radio" ng-model="mSelection" name="shape" value="Circle" ng-change="swap(2)">Circle
        </div> 
        
    </body>

Answer 1

您应该能够在＆＃34; sec1＆＃34;上定义ng-click。部分，如果有右键单击则执行。

e.g。 - 在部分添加：

ng-click="handleClick($event)"

在你的控制器上检查$ event.which === 3并采取相应的行动（例如，你可以设置一些var $ scope.hidden = true并在那个变量上使用＆＃34; ng-if＆＃34;从DOM中删除＆＃34; sec1＆＃34;。

希望有所帮助。

Answer 2

在要隐藏的部分使用ng-hide：

<section id="sec1" ng-hide="hideSec1">
    <css-timer id="idMainControllerTimer"
           interval="40"
           timeron="true"
           callback="mainTimerHandler"></css-timer>
</section>

使用mousedown处理程序中的$event.button属性：

$scope.defineSquare =  function (event) {
    if (event.button == 2) {
        $scope.hideSec1 = true;
    } else {
        $scope.hideSec1 = false;
    };
};

避免使用ng-if指令，因为它会破坏/创建DOM元素（除非你真的想破坏css-timer）。

另请注意ng-click仅在点击鼠标主按钮时触发。它不会检测其他鼠标按钮的点击次数。而是使用ng-mousedown或ng-mouseup。

DEMO on JSFiddle

在右键单击时隐藏带有angularjs的html部分

2 个答案: