尝试创建在 JQuery 中执行操作的新自定义 HTML 元素

Question

我正在尝试创建自己的自定义 HTML 元素，用户可以在其中与该元素中的文本进行交互。例如，我创建了一个元素，其中这些标签之间的任何内容都会有一个指针作为鼠标光标，当双击时，会发生一些事情。例如：

<objdc>Double click me!</objdc>

但是，这是我的代码，它不起作用：

$(document).ready(function() {

    var ObjDblClk = $('objdc');
    ObjDblClk.css({ cursor: 'pointer' });

    ObjDblClk.dblclick(function(e) {
        var range = window.getSelection() || document.getSelection() || document.selection.createRange();
        var word = $.trim(range.toString());
        if(word != '') {
           //Do Something

        }
        range.collapse();
        e.stopPropagation();
    });

});
}

有什么建议吗？

Answer 1

您遇到的问题与您没有正确使用折叠方法有关。它需要一个节点作为参数和一个偏移量。

所以...要修复您发布的确切行为，您需要执行以下操作：

     ObjDblClk.dblclick(function(e) {
        var range = window.getSelection() || document.getSelection() || document.selection.createRange();
        var word = $.trim(range.toString());
        if(word != '') {
           //Do Something

        }
        range.collapse(ObjDblClk[0], 0);
        e.stopPropagation();
    });

但是（这很重要）： 这对您的自定义 selection 完全没有任何作用（特别是因为双击影响select离子）。因此，您可以完全删除该行并尝试其他解决方案。

还有：你应该看看评论。伙计们是对的。除非你在做一些非常奇怪的内部工作，否则可能会有更好的方法。

Fiddle 此处（添加了一个警报，以便您看到函数被调用 - 不要忘记在双击之前 select 一些东西）：https://jsfiddle.net/713ndkm0/1/

Answer 2

要创建这样的自定义标签，您必须注意以下几点：

并非所有浏览器都会将您的自定义标记理解为 DOM 对象。 IE 是一个显着的例子。
您的新自定义标签中应该有一个连字符，例如 obj-dc (more info).
如果你想在IE中使用它，你必须预先声明它，如：

document.createElement('obj-dc');

Here is a link to creating new HTML tags for Chrome, in the new way, and here is a link 老 API。如您所见，即使是同一个浏览器也无法一致地使用自定义标签。

尝试创建在 JQuery 中执行操作的新自定义 HTML 元素

Trying to create new custom HTML elements which perform action in JQuery

html

javascript

tags

jquery

elements