Tag: JavaScript
如何获得具有CSS3转换元素的MouseEvent坐标？
我想检测一个MouseEvent发生在相对于被点击元素的坐标中 。 为什么？ 因为我想在点击的位置添加一个绝对定位的子元素。 我知道如何检测不存在CSS3转换（请参阅下面的说明）。 但是，当我添加一个CSS3变换，然后我的algorithm中断，我不知道如何解决它。 我没有使用任何JavaScript库，我想了解如何在普通的JavaScript中工作。 所以，请不要用“只用jQuery”来回答。 顺便说一句，我想要一个适用于所有MouseEvent的解决scheme，而不仅仅是“点击”。 这并不重要，因为我相信所有的鼠标事件都具有相同的属性，因此相同的解决scheme应该适用于所有的鼠标事件。 背景信息 根据DOM Level 2规范 ， MouseEvent几乎没有与获取事件坐标相关的属性： screenX和screenY返回屏幕坐标（原点是用户显示器的左上angular） clientX和clientY返回相对于文档视口的坐标。 因此，为了findMouseEvent相对于单击的元素内容的位置，我必须做这个math： ev.clientX – this.getBoundingClientRect().left – this.clientLeft + this.scrollLeft ev.clientX是相对于文档视口的坐标 this.getBoundingClientRect().left是元素相对于文档视口的位置 this.clientLeft是元素边界和内部坐标之间的边界（和滚动条）的数量 this.scrollLeft是元素内滚动的数量 getBoundingClientRect() ， clientLeft和scrollLeft在CSSOM视图模块中指定。 没有CSS变换的实验（它的工作原理） 混乱？ 尝试下面的一段JavaScript和HTML 。 点击后，一个红点应该出现在点击发生的地方。 这个版本“非常简单”，并按预期工作。 function click_handler(ev) { var rect = this.getBoundingClientRect(); var left = ev.clientX – rect.left – this.clientLeft + […]
拖动和调整CSS转换的元素的大小
例如，如果我们设置了一个-vendor-transform: rotate(40deg)在矩形<div>上-vendor-transform: rotate(40deg) css属性，所有突然的拖动和resize变得非常奇怪和有缺陷。 下面是一个简单的jQueryUI示例： http : //jsfiddle.net/Ja4dY/1/ 您会注意到，如果在转换时拖动或调整矩形的大小，它将跳起或向下跳动，光标将不会保留在正确的位置。 在我真正的代码我使用自定义代码的大小和拖动，但是我遇到了同样的问题。 那么，“问题”当然是一个元素的方向将会改变。 所以左边可以是正确的，顶部底部和中间和Javascript代码仍然处理每个方向，因为它不会被转换。 所以，问题是： 我们如何补偿变形 / 旋转元素？ 任何好的资源/书籍/博客也是非常受欢迎的。
Google Plusbutton代码在Chrome中警告：“不安全的JavaScript尝试访问框架”
我正尝试在我的网站上添加一个Google Plusbutton，尽pipe我在Chrome上使用了Google推荐的代码，但仍然不断收到JavaScript安全警告。 我用直接从Google网站pipe理员的推荐代码复制的代码复制了错误，没有其他补充： <html itemscope itemtype="http://schema.org/"> <head> <meta itemprop="name" content="Title"> <meta itemprop="description" content="Description"> </head> <body> <g:plusone annotation="inline"></g:plusone> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')\[0\]; s.parentNode.insertBefore(po, s); })(); </script> </body> 在Chrome中加载（Mac上为15），开发者控制台警告： Unsafe JavaScript attempt to access frame with URL http://mydomain.com/ from frame […]
生成Javascript文档
我正在寻找一种方法来从我的Javascript项目自动生成文档 。 任何人都知道我该怎么做？ 据我所知，有一些像JSDoc的工具，但我想知道你的意见，你最好的select，为什么。 谢谢！ 编辑：只是要清楚，我需要像JavaDOC或PHPDocumentor，但使用我的Javascript源代码。
优化重叠矩形的绘制
我有大量的矩形，有些与其他的重叠; 每个矩形都有一个绝对的z次序和一个颜色 。 （每个“矩形”实际上是粒子效果，网格或纹理的轴alignment的边界框，并且可能是半透明的，但只要不尝试挑选其他矩形，就更容易抽象地思考彩色矩形，所以我会用在问题描述:) 改变“颜色”的成本相当高; 其绘制两个蓝色矩形比绘制两个不同颜色的矩形要快得多。 甚至不在屏幕上绘制矩形的成本也相当高，应该避免。 如果两个矩形不重叠，它们相对于彼此的顺序并不重要。 只有它们重叠时，z顺序才是重要的。 例如： 1（红色）和4（红色）可以一起绘制。 2（蓝色）和5（蓝色）也可以绘制在一起，如3（绿色）和7（绿色）。 但是8（红色）必须在6（蓝色）之后绘制。 所以要么我们把所有的三个红色画在一起，画两个蓝色，要么把所有的蓝色画在一起，画两个红色。 而且有些矩形可能会偶尔移动。 （不是所有的人都知道，有些矩形是静止的，有些则是已知的。） 我将在JavaScript / webGL中绘制这个场景。 我怎样才能以合理的顺序绘制矩形， 以最大限度地减less颜色变化 ，与JavaScript剔除代码的良好折衷与让GPU剔除？ （只是算出哪些矩形重叠，哪些是可见的，是昂贵的，我有一个基本的四叉树 ，这很快就绘制了我的场景（相比之下，只是发射整个场景的绘制操作）;现在的问题是如何最小化OpenGL状态更改并尽可能地连接属性数组） 更新我创build了一个非常简单的testing应用程序来说明问题，并作为解决scheme演示的基础： http : //williame.github.com/opt_rects/ 源代码在github上，很容易分叉： https ： //github.com/williame/opt_rects 事实certificate，很难做出一个足够的状态变化的小testing应用程序来真正重现我在整场游戏中看到的问题。 在某些时候，你必须把它看作是一种状态变化足够昂贵的情况。 同样重要的是如何加快空间索引（演示中的四叉树）和整体方法。
有没有人在NodeJS中实现过wiki？
我正在寻找一个纯粹的javascript，开源的wiki实现，最好是使用NodeJS。 我在哪里可以find它？
JavaScript的inheritance：当构造函数有参数
使用纯JavaScript来做inheritance，这是我通常做的： function A() {} A.prototype.run = function () {}; function B() {} B.prototype = new A; B.prototype.constructor = B; 由于没有任何参数传入构造函数，新的A没有什么可抱怨的。 现在，如果构造函数有parameter passing，我还没有想出inheritance的好方法。 例如， function A(x, y) {} A.prototype.run = function () {}; function B(x, y) {} B.prototype = new A; B.prototype.constructor = B; 我可以传递一些任意值，如： B.prototype = new A(null, null); 在某些情况下，我可能需要在A的构造函数中validationx和y。在某些极端情况下，检查x或y时需要抛出错误。 那么B就没有办法使用新的A. 有什么build议么？ 谢谢！
好的ASP.NET类似于网格控件？
我们正在寻找一个ASP.NET兼容的数据网格，允许多行编辑类似于Excel或WinForms数据网格。 它还必须支持非常基本的键盘input（选项卡，箭头键，返回）。 请注意，我们不是在寻找Excelfunction（函数，格式，公式）…只是一个快速input数据的网格。 我已经看了Telerik，Infragistics，ComponentOne，DevExpress和其他许多人……他们所有的支持团队都表示，这些控件要么不支持multithreading，要么以这样一种笨拙的方式来做，以至于无法使用。 有没有人使用任何类似Excel的网格，他们可以推荐？ 客户端网格似乎更接近我们所需要的，Sigma Widgets（ 示例 ）是我迄今发现的最接近的。 Extjs的网格太不灵活了，jQuery网格太麻烦了。
replaceKnockout.js中的所有元素observableArray
我在我的视图模型中有一个observableArray 。 在创buildVM后，我希望完全replaceobservableArray的数据。 以下是我如何做到这一点： //Initial Setup var vm = {}; vm.roles = ko.observableArray([]); ko.applyBindings(vm); //….replace array later on…. vm.roles(["1", "2"]); 这似乎工作正常，但我担心，如果这是不正确的，可能会导致内存泄漏。 任何人都可以符合，如果这是更新现有的observableArray首选的方式假设你想要更换所有的数据？ 我注意到observableArray有一个removeAll()方法，并想知道是否需要调用干净地做这个，或者如果我很好，我在做什么？
在部分视图中放入JavaScript是否可行？
我正在开发Web应用程序，其中主页面包含两个部分：始终可见的常量块和由3个部分视图之一组成的信息块。 每个部分视图都是AJAX请求的结果，只加载一次（在jQuery提供切换窗口之后）。 它运作良好，但我遇到了一个问题。 部分视图的html代码包含常量块和信息块中使用的js函数。 当页面被加载时，这些函数可以“看到”对方，它的工作，但resharper无法find函数声明，并警告我这个。 我不能通过将代码转换成外部js文件来解决问题，因为在代码中可以find剃刀的语法。 我能用这个做什么？ 谢谢。 更新： 最后，我决定解决从视图分离我的JS代码的问题。 所以，新的问题是如何将剃刀语法包含到js文件中，或者可以接受的select是什么。 我发现的stream行的解决scheme是使用全局variables，数据属性和我更喜欢的 – John Katsiotis的RazorJS库。 http://djsolid.net/blog/razorjs—write-razor-inside-your-javascript-files 我希望它能够稳定工作，让Resharper高兴。 干杯! 更新： 三年后，我回忆起这个问题，并根据我的经验决定更新它。 事实上，现在我宁愿不build议使用额外的库。 特别是如果你不是项目团队中唯一的成员……如果你在所有的库中得到了保证，那么它会受到创build者和社区的支持，并且可以很容易地集成到你的IDE中（如果使用特殊的语法） 。 同样，你们团队的所有人都应该知道它是如何工作的。 所以现在我会build议做下一件事情： 把所有的JS保存在不同的文件中。 尽可能地隔离它。 为其提供外部API。 从视图中调用API函数。 将所有Razor生成的URL，短信，常量作为资源parameter passing。 例如： js文件： $.api.someInitFunction = function(resources){ … } 视图： <script> $.api.someInitFunction({ urls: { myAction: '@Url.Action("MyAction", "MyController")' }, messages: { error: '@errorMessage' }, consts: { myConst: […]
