鼠标事件

关注

原创最新推荐文章于 2026-03-29 02:33:02 发布 219 阅读 AI 写同款· GEO 优化 ›

QT学习之鼠标事件在 Qt Designer 中创建一个 Dialog 窗口，并将一个。中，计算新位置，并确保不超出父窗口边界。方法，检测左键点击，并切换背景色。的类名修改为自定义的类名（创建一个自定义类（例如。方法，实现拖拽逻辑。用户可以通过拖拽来移动。阅读详情

样式

<style>
    .btnHover {
        background-color: #F40;
        color: #FFF;
        border: none;
    }

    #box {
        width: 300px;
        height: 300px;
        background-color: #EEE;
    }
</style>

body部分

<button id="toBD">click</button>
<input id="pos" type="text">
<div id="box"></div>
<script>
    //封装document.getElementById()，简洁化
    function getById(name) {
        return document.getElementById(name);
    }
    //点击跳转网页
    var bdBtn = getById("toBD");
    function pop() {
        window.location.href = "http://www.baidu.com";
    }
    bdBtn.onclick = pop;
    // 文本框悬浮样式事件

    bdBtn.onmouseenter = function () {
        this.className = "btnHover";
    }
    bdBtn.onmouseleave = function(){
        this.className = "";
    }

    var box = getById("box");
    box.onmousemove = function(){
        var x = event.x-this.offsetLeft;
        var y = event.y-this.offsetTop;
        pos.value = [x,y].join(":");
    }
</script>