个人中心
gpt4 book ai didi

javascript - 我得到的 mouseEvent.offsetX 比实际 Canvas 大小大得多

转载 作者：搜寻专家 更新时间：2023-11-01 04:09:46 26 4
gpt4 key购买 nike

当我使用下面的 Javascript 代码时

function init() {
    var gameCanvas = document.getElementById("gameCanvas");
    document.getElementById("canvasWidth").innerHTML = gameCanvas.width;

    gameCanvas.addEventListener("mousemove", handleMouseEvent);
}


function handleMouseEvent(mouseEvent) {
    document.getElementById("mouseX").innerHTML = mouseEvent.offsetX;;
}

用这个 html

<body>
    <div id="mainScreen">
        <div id="topScreen">
        <h1 id="canvasWidth">Score:</h1>
        <h1 id="mouseX">0</h1>
        </div>
        <div id="gameScreen">
            <canvas id="gameCanvas" onclick="init()">               
            </canvas>
        </div>
    </div>
</body>

Canvas 宽度显示为 300，而留在 Canvas 中的 mouseX 远远超过 300。我已经链接了它的屏幕截图。它在 Chrome 中工作正常，但它不在 Internet Explorer 和 Windows 商店应用程序中工作。

截图:http://dc365.4shared.com/download/ajE0f2XQ?tsid=20130615-014658-676a63ae

指针位于右边缘附近的某处，但它没有出现在屏幕截图中，这就是我标记它的原因。顶部第一个数字是 Canvas 宽度，第二个数字显示指针 offsetX。

为什么会出现这种情况，如何纠正？

更新(添加CSS代码)

CSS 代码

#mainScreen {
    display: -ms-grid;
    -ms-grid-columns: 30px 1fr 30px;
    -ms-grid-rows: 30px 100px 20px 1fr 30px;
    height:inherit;
}

#topScreen {
    display: -ms-grid;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-columns: 30px 150px 30px 60px 100px 1fr 30px;
    -ms-grid-rows: 20px 1fr 20px;
}

#canvasWidth {
    display: -ms-grid;
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

#mouseX {
    display: -ms-grid;
    -ms-grid-column: 4;
    -ms-grid-row: 2;
}

#gameScreen {
    display: -ms-grid;
    -ms-grid-column: 2;
    -ms-grid-row: 4;
    -ms-grid-rows:1fr;
    -ms-grid-columns: 1fr;
    height:inherit;
    width:inherit;
}
#gameCanvas {
    height:inherit;
    width:inherit;
    background-color:white;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

最佳答案

查看两者之间的区别偏移X,X层，第X页，客户X，screenX 属性这可能有用 MouseEventsProperties ....不同的浏览器支持不同的属性了解它们之后，您将了解如何使用这些属性，以便您的应用程序适用于所有平台

好的，这是我在 chrome、safari、firefox 甚至 iPad 等触摸设备上编写和测试的代码(非常简化的版本)。该代码将事件对象作为参数，它将返回具有相对于 Canvas 的 X 和 Y 的坐标对象。希望这会有所帮助...

containerX = document.getElementById('container').offsetLeft;
containerY = document.getElementById('container').offsetTop;
//here container is the id of my canvas basically the above two lines are global 
// in my code 

function getX_Y(evt){
var coord={
    X: null,
    Y: null
}
var isTouchSupported = 'ontouchstart' in window;
if(isTouchSupported){                     // for touch devices
    coord.X = evt.clientX-containerX;
    coord.Y = evt.clientY-containerY;
    return coord;
}

else if(evt.offsetX || evt.offsetX == 0){    //for webkit browser like safari and chrome
    coord.X = evt.offsetX;
    coord.Y = evt.offsetY;
    return coord;
}

else if(evt.layerX || evt.layerX == 0){      // for mozilla firefox
    coord.X = evt.layerX;
    coord.Y = evt.layerY;
    return coord;
}
}

关于javascript - 我得到的 mouseEvent.offsetX 比实际 Canvas 大小大得多，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17106665/

26 4 0
文章推荐： ios - 如何在 Xcode 6 中下载应用程序数据
文章推荐： javascript - jQuery.event.handle 未记录且已弃用
文章推荐： javascript - 在相同位置使用 jQuery 将列表框项目移动和删除到另一个列表框
文章推荐： ios - 确定使用了哪个共享扩展
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com