检测单击元素的内部文本时不包含第二个元素中的文本 [英] Detect click on the inner text of the element without wrapping the text in a second element

问题描述

 < div id =bigdiv 
点击这个文本
< / div> 
  

我正在尝试编写一个javascript或jquery代码来检测文本的点击，而不是元素。有没有办法做到这一点？

解决方案

由于我们无法直接在textNodes上自己侦听事件，因此我们必须更有创意的解决问题的途径。我们可以做的一件事就是查看点击事件的坐标，看看它是否与textNode重叠。

首先，我们需要一个小的辅助方法来帮助我们追踪一组约束中是否存在一组坐标。这将使我们更容易任意确定一组x / y值是否在一组维度中：

 函数isInside（x，y，rect）{
 return x> = rect.left&& y> = rect.top 
&& x <= rect.right&& y <= rect.bottom; 
} 
  

这是相当基本的。 x 和 y 值将是数字，而 rect 引用将是一个至少包含四个属性的对象，其中绝对像素值代表矩形的四个角。

接下来，我们需要一个循环遍历所有childNode的函数是textNodes，并确定点击事件是否发生在其中之一上：

  function textNodeFromPoint（element，x，y）{ 
 var node，nodes = element.childNodes，range = document.createRange（）; （node.nodeType！== 3）continue; 
 for（var i = 0; node = nodes [i]，i< nodes.length; i ++）{
 if 
 range.selectNodeContents（node）; 
 if（isInside（x，y，range.getBoundingClientRect（）））{
 return node; 
} 
} 
返回false; 
} 
  

现在我们可以快速确定textNode是否直接在点击区域的下面，并获得该节点的值：

$ p $元素.addEventListener（click，function（event） {
if（event.srcElement === this）{
var clickedNode = textNodeFromPoint（this，event.clientX，event.clientY）;
if（clickedNode）{
alert （您点击了：+ clickedNode.nodeValue）;
}
}
}）;

请注意，初始条件 if（event.srcElement）=== this 允许我们忽略源自嵌套元素的点击事件，例如图像或span标记。在textNodes上发生的点击会将父元素显示为 srcElement ，因此这些是我们唯一关心的。

你可以在这里看到结果： http://jsfiddle.net/jonathansampson/ug3w2xLc/

I have a Div which is as big as half of my page using CSS:

<div id="bigdiv">
     CLICK ON THIS TEXT
</div>

I am trying to write a javascript or jquery code which detects click on the text and not the rest of the element. Is there a way to do that?

解决方案

Since we cannot listen for events directly on the textNodes themselves, we have to take a more creative path to solving the problem. One thing we can do is look at the coordinates of the click event, and see if it overlaps with a textNode.

First, we'll need a small helper method to help us track whether a set of coordinates exists within a set of constraints. This will make it easier for us to arbitrarily determine if a set of x/y values are within the a set of dimensions:

function isInside ( x, y, rect ) {
    return x >= rect.left  && y >= rect.top
        && x <= rect.right && y <= rect.bottom;
}

This is fairly basic. The x and y values will be numbers, and the rect reference will be an object with at least four properties holding the absolute pixel values representing four corners of a rectangle.

Next, we need a function for cycling through all childNodes that are textNodes, and determining whether a click event took place above one of them:

function textNodeFromPoint( element, x, y ) {
    var node, nodes = element.childNodes, range = document.createRange();
    for ( var i = 0; node = nodes[i], i < nodes.length; i++ ) {
        if ( node.nodeType !== 3 ) continue;
        range.selectNodeContents(node);
        if ( isInside( x, y, range.getBoundingClientRect() ) ) {
            return node;
        }
    }
    return false;
}

With all of this in place, we can now quickly determine if a textNode was directly below the clicked region, and get the value of that node:

element.addEventListener( "click", function ( event ) {
    if ( event.srcElement === this ) {
        var clickedNode = textNodeFromPoint( this, event.clientX, event.clientY );
        if ( clickedNode ) {
            alert( "You clicked: " + clickedNode.nodeValue );
        }
    }
});

Note that the initial condition if ( event.srcElement ) === this allows us to ignore click events originating from nested elements, such as an image or a span tag. Clicks that happen over textNodes will show the parent element as the srcElement, and as such those are the only ones we're concerned with.

You can see the results here: http://jsfiddle.net/jonathansampson/ug3w2xLc/

这篇关于检测单击元素的内部文本时不包含第二个元素中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！