Javascript 单击对象时获取其位置

我现在的小提琴手：

当您在页面上移动bean 1（框1）时，它会显示bean 1的位置，但是我如何显示第二个框的位置呢？我希望它能够显示我点击的任何东西的位置

所以，如果我单击框1并移动它，它将显示第一个框的X和Y

如果我在方框2上单击并移动它，它将显示第二个方框的X，Y

这是代码中显示X和Y位置的部分：

   $( "*", document ).on('click',function( event ) {
            var offset = $( "strong" ).offset();
            topp = offset.top;
            left = offset.left;
            event.stopPropagation();
            $( "#result" ).text( this.tagName +
            "  ( " + left + ", " + topp + " )" + offset.id );


}

---

另外，为什么id没有定义？

id

没有定义，因为

.offset（）

方法中没有id。你在干什么

$( "strong" ).offset().id

偏移量只返回顶部和左侧，没有id。这就是它未定义的原因

现在处理问题，返回第一项。代码

var offset = $( "strong" ).offset();

也只是查看一个元素，如果您想要单击的内容，您将使用此

var elem = $(this);
var offset = elem.offset();

还要拿到身份证

elem.attr("id);

---

id

未定义，因为

.offset（）

方法中没有id。你在干什么

$( "strong" ).offset().id

偏移量只返回顶部和左侧，没有id。这就是它未定义的原因

现在处理问题，返回第一项。代码

var offset = $( "strong" ).offset();

也只是查看一个元素，如果您想要单击的内容，您将使用此

var elem = $(this);
var offset = elem.offset();

还要拿到身份证

elem.attr("id);

---

我想你说的是这样的：

与此相反：

var offset = $( "strong" ).offset();

我已经做到了：

var offset = $( this ).offset();

检查一下小提琴，看它是否有效

对于id，还应将其更改为$（this.id）

---

但是您必须将ID添加到元素中。

我认为您需要的是这样的：

与此相反：

var offset = $( "strong" ).offset();

我已经做到了：

var offset = $( this ).offset();

检查一下小提琴，看它是否有效

对于id，还应将其更改为$（this.id）

但您必须将ID添加到元素中。

尝试：

$( "*", document ).on('click',function( event ) {
            var offset = $( this ).offset();
            topp = offset.top;
            left = offset.left;
            event.stopPropagation();
            $( "#result" ).text( this.tagName +
            "  ( " + left + ", " + topp + " )" + offset.id );


}

编辑：

由于id未定义，它是父节点的一部分，因此必须注意，在每个bean中选择的节点可能不同，并且对属性的访问可能是可变的（this、this.parentNode等），因此需要将其放置在正确的位置或将事件处理程序设置为特定元素。

尝试：

$( "*", document ).on('click',function( event ) {
            var offset = $( this ).offset();
            topp = offset.top;
            left = offset.left;
            event.stopPropagation();
            $( "#result" ).text( this.tagName +
            "  ( " + left + ", " + topp + " )" + offset.id );


}

编辑：

由于id未定义，它是父节点的一部分，因此必须注意，在每个bean中选择的节点可能不同，对属性的访问也可能是可变的（this、this.parentNode等），因此需要将其放置在正确的位置或将事件处理程序设置为特定元素。

this:

var offset = $( "strong" ).offset();

var offset = $( this ).offset();

$('.normal, .failure').draggable({//drag
    stop: function() {//on stop
        var t = parseInt($(this).position().top),//get top
            l = parseInt($(this).position().left);//get left
        $( "#result" ).text( this.tagName+' ('+l+', '+t+') '+this.id);//print
    }
});

应该是这样的：

var offset = $( "strong" ).offset();

var offset = $( this ).offset();

$('.normal, .failure').draggable({//drag
    stop: function() {//on stop
        var t = parseInt($(this).position().top),//get top
            l = parseInt($(this).position().left);//get left
        $( "#result" ).text( this.tagName+' ('+l+', '+t+') '+this.id);//print
    }
});

未定义的ID:

var offset = $( "strong" ).offset();

var offset = $( this ).offset();

$('.normal, .failure').draggable({//drag
    stop: function() {//on stop
        var t = parseInt($(this).position().top),//get top
            l = parseInt($(this).position().left);//get left
        $( "#result" ).text( this.tagName+' ('+l+', '+t+') '+this.id);//print
    }
});

对于未定义的id，首先offest（）方法没有.id。其次，唯一具有id的元素是后面的容器。当你点击方框时，你实际上是在点击前面的div或p，而不是后面的id。因此，如果您想要一个id，您需要将其添加到前面的p或div中

这里有一个这个：

var offset = $( "strong" ).offset();

var offset = $( this ).offset();

$('.normal, .failure').draggable({//drag
    stop: function() {//on stop
        var t = parseInt($(this).position().top),//get top
            l = parseInt($(this).position().left);//get left
        $( "#result" ).text( this.tagName+' ('+l+', '+t+') '+this.id);//print
    }
});

应该是这样的：

var offset = $( "strong" ).offset();

var offset = $( this ).offset();

$('.normal, .failure').draggable({//drag
    stop: function() {//on stop
        var t = parseInt($(this).position().top),//get top
            l = parseInt($(this).position().left);//get left
        $( "#result" ).text( this.tagName+' ('+l+', '+t+') '+this.id);//print
    }
});

未定义的ID:

var offset = $( "strong" ).offset();

var offset = $( this ).offset();

$('.normal, .failure').draggable({//drag
    stop: function() {//on stop
        var t = parseInt($(this).position().top),//get top
            l = parseInt($(this).position().left);//get left
        $( "#result" ).text( this.tagName+' ('+l+', '+t+') '+this.id);//print
    }
});

对于未定义的id，首先offest（）方法没有.id。其次，唯一具有id的元素是后面的容器。当你点击方框时，你实际上是在点击前面的div或p，而不是后面的id。因此，如果您想要一个id，您需要将其添加到前面的p或div中

---

这是一个内置停止事件的DragTable

所以使用它可能是有意义的

类似这样的内容：

var offset = $( "strong" ).offset();

var offset = $( this ).offset();

$('.normal, .failure').draggable({//drag
    stop: function() {//on stop
        var t = parseInt($(this).position().top),//get top
            l = parseInt($(this).position().left);//get left
        $( "#result" ).text( this.tagName+' ('+l+', '+t+') '+this.id);//print
    }
});

拉小提琴：

---

而

ID

是未定义的，因为

$（“strong”）.offset（）.ID

不正确，它需要是

$（“strong”）.prop（'ID'）

或类似的东西。虽然

strong

没有

ID

，但它仍然无法工作。。。您需要

.normal

和

.failure

的

ID

，它才能执行您想要的操作。

Dragable有一个内置的停止事件

所以使用它可能是有意义的

类似这样的内容：

var offset = $( "strong" ).offset();

var offset = $( this ).offset();

$('.normal, .failure').draggable({//drag
    stop: function() {//on stop
        var t = parseInt($(this).position().top),//get top
            l = parseInt($(this).position().left);//get left
        $( "#result" ).text( this.tagName+' ('+l+', '+t+') '+this.id);//print
    }
});

拉小提琴：

---

而

ID

是未定义的，因为

$（“strong”）.offset（）.ID

不正确，它需要是

$（“strong”）.prop（'ID'）

或类似的东西。虽然

strong

没有

ID

，但它仍然无法工作。。。你需要

的
ID
。正常的
和
失败的
，它才能做你想做的事。
ID仍然是未定义的。我认为ID只是一个示例，说明哪个元素被拖走了，并不是那么重要，顺便说一句，我不知道这对他/她来说是否足够。他们问“还有，为什么ID未定义？”@EdgarAlexander如果他需要id来进行其他计算怎么办？人们通常不会包含过多的代码。@epascrello Ops，by badid仍然是未定义的。我认为id只是一个示例，说明哪个元素被拖拽了，并没有那么重要。顺便说一句，我不知道这对他/她是否足够。他们问“还有，为什么id未定义？”@EdgarAlexander如果他需要id来进行其他计算怎么办？人们通常不会包含过多的代码。@epascrelloops