满足嵌套跨度。谁有重点？

概述满足嵌套跨度。 谁有重点？

这个问题 （我添加了一个赏金）是相关的，并给出了上下文和动机（我的GPLv3 MELT监视器上的Github;我最后添加了一些自述文件）。

我只对最近的 HTML5兼容浏览器感兴趣（在GNU / linux上），例如firefox 38（至less是42）或Chrome 46（在Debian / SID桌面上，x86-64）

所以，假设我在我的HTML5页面

<div ID='myeditdiv' contenteditable='true'> <span class='foo_cl'>FOO<span class='bar_cl'>bar</span></span> </div>

（实际上HTML是生成的，DOM也是如此;我目前正在服务器端生成一些构buildDOM的JavaScript;当然，我可以更改生成器！）

windows 7高对比度主题覆盖firefox中的网站颜色

安装旧版本的firefox

有未读电子邮件时如何使屏幕闪烁

是否有任何浏览器看起来在Ubuntu和windows之间的远程类似

在windows firefox中使用Facebook likebutton发布

而且我点击以便重点在两个OO之间。 我如何获得foo_cl的DOM元素，最好是使用Jquery。

同样的问题集中在ar之间。 我想要bar_cl跨度。

当然， $(':focus')不起作用。 它给出了div

FWIW，这是MELT监视器的提交9109ae5b3d168f1 。

PS。 看我的（2015年11月26 日 ） 这个问题的增编。 可能contenteditable对我没有用，但tabindex肯定是有用的！

在windows中模拟Apple firefox

为什么我的萤火虫不显示所有的JavaScript错误

在firefox和AndroID上不受信任的StartSSL证书

embeddedquicktimevIDeo暂停点击如何防止？

npm不安装会一直返回错误

为了使任何元素可以聚焦，不仅要交互的内容，还必须设置tabindex属性 。

在你的例子中，这将是：

<div ID='myeditdiv' contenteditable='true'> <span class='foo_cl' tabindex="-1">FOO<span class='bar_cl' tabindex="-1">bar</span</span> </div>

注：负tabindex使元素可以聚焦， 但不可tabbable，因为使用tabbing方法将从0开始使用绝对值（ spec ）。

现在在jquery中，您可以将focus事件委派给这些元素：

$('[contenteditable]').on('focus','*',function(e){ e.stopPropagation(); console.log(this); });

-Jsfiddle-

作为一个侧面说明，jquery UI有一个:focusable伪选择器。 如果您希望将tabindex属性动态设置为不可聚焦元素，则可以使用：

$('[contenteditable]').find(':not(:focusable)').attr('tabindex',-1);

-Jsfiddle（包括jquery UI） –

如果你不想包含jquery UI只是为了得到:focusable伪选择器，你可以创建自己的自定义选择器：

//include IIFE if not already including jquery UI (function () { function focusable(element,isTabIndexNotNaN) { var map,mapname,img,nodename = element.nodename.tolowerCase(); if ("area" === nodename) { map = element.@R_404_3717@; mapname = map.name; if (!element.href || !mapname || map.nodename.tolowerCase() !== "map") { return false; } img = $("img[usemap='#" + mapname + "']")[0]; return !!img && $(img).is(':visible'); } return (/^(input|select|textarea|button|object)$/.test(nodename) ? !element.Disabled : "a" === nodename ? element.href || isTabIndexNotNaN : isTabIndexNotNaN) && // the element and all of its ancestors must be visible $(element).is(':visible'); } $.extend($.expr[":"],{ focusable: function (element) { return focusable(element,!isNaN($.attr(element,"tabindex"))); } }); })();

-Jsfiddle-

总结

以上是内存溢出为你收集整理的满足嵌套跨度。 谁有重点？全部内容，希望文章能够帮你解决满足嵌套跨度。 谁有重点？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。