lufy's legend

标题: 移动端addEventListener监听点击事件组件检测点错位 [打印本页]

作者: banete    时间: 2014-10-17 15:49
标题: 移动端addEventListener监听点击事件组件检测点错位
用LBitmap载入图片,LSprite.addChild后,使用addEventListener监听LMouseEvent.MOUSE_DOWN时,电脑上正常,但是手机端的事件触发位置一般处于图片的左上角,下方无反应,如果图片较小时,检测点处于外部,很难触发事件。
并且LBitmap的addEventListener根本无效,使用您的http://lufylegend.com/demo/test/49.html页面,将  button01 = new LButtonSample1("测试按钮1",50);  替换为 button01=new LBitmap( new LBitmapData("#00ffff", 0, 0, 100, 100));后不能监听点击事件
作者: lufy    时间: 2014-10-17 17:13
请看api文档
LBitmap中并没有LMouseEvent.MOUSE_DOWN
http://lufylegend.com/api/zh_CN/out/classes/LBitmap.html
作者: banete    时间: 2014-10-17 18:22
好吧,大神。关于错位的问题,您有什么看法吗?
作者: banete    时间: 2014-10-17 18:27
我用LSprite.addChild添加了多个LBitmap,通过图层叠加把它们组合成了一张图,但是在手机上监听点击事件时,监听事件的触发点都偏左上角,是不是分辨率方面的问题?
作者: lufy    时间: 2014-10-17 19:42
banete 发表于 2014-10-17 18:27
我用LSprite.addChild添加了多个LBitmap,通过图层叠加把它们组合成了一张图,但是在手机上监听点击事件时 ...

能否提供运行连接或者代码?
作者: banete    时间: 2014-10-19 19:31
本帖最后由 banete 于 2014-10-19 19:38 编辑

大神,我觉得可能是由于我页面布局的缘故,一开始我是想在一个页面里面划出一个div来加载canvas来展示动画的,因此把页面划分成了三部分
<div id="header" style="width:250px;height:80px;margin-left:auto;margin-right:auto;margin-top:5%;"></div>
<div id="legend"  style="width:800px;height:450px;margin-left:auto;margin-right:auto;margin-top:5%;"></div>
<div id="footer" style="width:250px;height:80px;margin-left:auto;margin-right:auto;margin-top:5%;" ></div>
<script>
LInit(50,"legend",800,450,main);
var layer,label,button01,button02;
function main(){
        LGlobal.setDebug(true);

        var backLayer = new LSprite();
        backLayer.graphics.drawRect(1,"#000000",[0,0,LGlobal.width,LGlobal.height],true,"#cccccc");
        addChild(backLayer);

        layer = new LSprite();
        layer.y = 100;
        layer.graphics.drawRect(2,"#ff0000",[0,0,500,300],true,"#880088");
        backLayer.addChild(layer);

        button02=new LBitmap( new LBitmapData("#00ffff", 0, 0, 100, 100));
        button02.x = 10;
        button02.y = 10;
        button01 = new LSprite();
        button01.addChild(button02);
        layer.addChild(button01);
        label = new LTextField();
        label.text = "layer01";
        label.size = 20;
        label.x = 400;
        label.y = 10;
        layer.addChild(label);

        mouseevent();
}
function mouseevent(){
        layer.addEventListener(LMouseEvent.MOUSE_DOWN,mousedownlayer);
        layer.addEventListener(LMouseEvent.MOUSE_UP,mouseuplayer);

        button01.addEventListener(LMouseEvent.MOUSE_DOWN,mousedownbutton01);
        button01.addEventListener(LMouseEvent.MOUSE_UP,mouseupbutton01);
}
function mousedownlayer(e){
        trace("layer01 is mousedown");
}
function mouseuplayer(e){
        trace("layer01 is mouseup");
        console.log(button01);
}
function mousedownbutton01(e){
        trace("button01 is mousedown");
}
function mouseupbutton01(e){
        trace("button01 is mouseup");
}
</script>
作者: banete    时间: 2014-10-19 19:36
本帖最后由 banete 于 2014-10-19 19:40 编辑

用的测试机是三星galaxy note
点击button区域不能触发,触发区域在button外的上部
像这种布局在pc端是没有问题的,但在手机上就会错位
作者: lufy    时间: 2014-10-19 22:12
banete 发表于 2014-10-19 19:36
用的测试机是三星galaxy note
点击button区域不能触发,触发区域在button外的上部
像这种布局在pc端是没有 ...

上面这样设置,确实会导致手机上出现问题

既然最终还是由canvas来显示页面的,
那么你说的这个开始的动画,完全可以用引擎来实现啊,不需要自己再做特殊处理了
引擎提供全屏设置,页面上的各种对其方式,以及多种动画效果,所以这些东西最好都由引擎来完成




欢迎光临 lufy's legend (http://lufylegend.com/forum/) Powered by Discuz! X2.5