search

Home  >  Q&A  >  body text

javascript - vue.js 的事件绑定为何有些无效果

为什么无法触发鼠标覆盖和键盘事件。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件绑定测试</title>
    <style type="text/css" rel="stylesheet">
        body {
            margin: 0;
        }
        .gen {
            width: 100px;
            height: 100px;
            border: solid 0.1px #122b40;
        }
        .isAlive {
            background-color: green;
        }
    </style>
</head>
<body id="map" style="width: 100%;overflow: hidden;">

<p class="gen" @hover="onhover" @keyup.enter="enter" @click="onclick"></p>


<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>
<script type="application/javascript">
    var vm = new Vue({
        el: '#map',
        data: {},
        methods :{
            onclick : function(e){
                alert("click");
            },
            onhover : function(e){
                alert("hover");
            },
            enter : function(e){
                alert("enter");
            }
        }
    })

</script>
</body>
</html>
PHP中文网PHP中文网2834 days ago264

reply all(1)I'll reply

  • 巴扎黑

    巴扎黑2017-04-10 16:34:13

    事件中没有hover,可以使用mouseover或者mouseenter替代。要监测回车,建议把p换成input。
    MDN 事件类型一览表

    reply
    0
  • Cancelreply