相关疑难解决方法(0)

在另一个元素下的元素上注册点击

我有一个元素在不透明度的元素下:0.5我希望能够点击.如何点击"穿过"最顶层的元素？

这是一个演示我的问题的例子.单击框以打开和关闭它们.您可以在jsbin上编辑它以试用您的解决方案.

如果您可以在悬停时切换框,则可获得奖励积分.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>Sandbox</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
body { background-color: #000; } 
.box {width: 50px; height: 50px; border: 1px solid white} 
.highlight {background-color: yellow;} 
</style>
<script type="text/javascript">
var dthen = new Date();
$('<div id="past">').css({'height':  (dthen.getMinutes()*60)+dthen.getSeconds() +'px'
            ,'position': 'absolute'
            ,'width': '200px'
            ,'top': '0px'
            ,'background-color': 'grey'
            ,'opacity': '0.5'
            })
        .appendTo("#container");

setInterval(function(){
    dNow = new Date();
    $('#past').css('height', ((dNow.getSeconds()+(dNow.getMilliseconds()/1000))*50)%300 +'px');
},10)

 $(".box").click(function(){ …

Run Code Online (Sandbox Code Playgroud)

javascript jquery

Sam*_*ler

2009 07-19

19
推荐指数

2
解决办法

2万
查看次数

HTML5 canvas的三种鼠标检测技术,都不够

我已经构建了一个画布库,用于管理某些工作项目的形状场景.每个形状都是一个具有与之关联的绘图方法的对象.在刷新画布期间,绘制堆栈上的每个形状.形状可能具有典型的鼠标事件绑定,这些事件都围绕画布自己的DOM鼠标事件.

我发现了一些野外技术,用于检测各个形状上的鼠标悬停,每种技术都有效,但有一些相当严重的警告.

清除的鬼画布用于绘制单独的形状.然后我存储了鬼画布的副本getImageData().可以想象,当有许多点绑定鼠标事件时,这会占用大量内存(960x800画布上的100个可点击形状在内存中约为300MB).
为了回避内存问题,我开始遍历像素数据并仅将地址存储到具有非零alpha的像素.这对于减少内存效果很好,但却大大增加了CPU负载.我只迭代每个第四个索引(RGBA),并且任何具有非零alpha的像素地址都存储为哈希键,以便在鼠标移动期间进行快速查找.它仍然会使Linux上的移动浏览器和Firefox超载10秒以上.
我读到了一种技术,其中所有形状将被绘制到一个鬼画布上,使用颜色来区分每个像素拥有的形状.我对这个想法非常满意,因为它理论上应该可以区分数百万个形状.

不幸的是,这被抗锯齿打破了,在大多数画布实现上都无法禁用.每个模糊边缘都会创建数十种颜色,这些颜色可以被安全地忽略,除了它们/它们可以混合/重叠形状边缘.当有人在形状边界上穿过鼠标时,我想要发生的最后一件事就是为与AA混合中出现的颜色相关的不相关形状发射半随机鼠标悬停事件.

我知道这对于视频游戏开发者来说不是一个新问题,必须有快速算法来处理这类事情.如果有人知道一种算法可以解决(逼真地)数百种形状而不占用CPU超过几秒钟或大幅浪费RAM消耗,我将非常感激.

有关鼠标悬停检测的另外两个Stack Overflow主题,这两个主题都讨论了这个主题,但它们只是我描述的3种方法. 检测HTML画布中某些点的鼠标悬停？和鼠标悬停圈HTML5画布.

编辑:2011/10/21

我测试了另一种更动态且不需要存储任何东西的方法,但它被Firefox中的性能问题所摧毁.该方法基本上是循环形状和:1)在鼠标下清除1x1像素,2)绘制形状,3)在鼠标下获得1x1像素.令人惊讶的是,这在Chrome和IE中非常有效,但在Firefox下却很糟糕.

显然,如果您只想要一个小的像素区域,Chrome和IE就能够进行优化,但Firefox似乎根本不会根据所需的像素区域进行优化.也许在内部它获得整个画布,然后返回你的像素区域.

代码和原始输出:http://pastebin.com/aW3xr2eB.

Canvas getImageData()性能(ms)