javascript 确定 HTML 元素位置变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18054753/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Determine HTML element position change
提问by Dragos Durlut
EDIT: See update!
编辑：查看更新！
I have the following html:
我有以下 html：
<body>
<span id="milestone1">
</span>
<img id="image1" src="blabla.jpeg" style="width:400px;height:200px;" />
<div id="divOverlayOverImage1" style="position:absolute; top:100px; left:40px; width:400px;height:200px;" onclick="DoFunkyStuff();"><div>
</body>
At first the divOverlayOverImage1is positioned over Image1, covering it, but if I run the code below, the #divOverlayOverImage1element will no longer covering the #image1element.
起初，它divOverlayOverImage1位于 上方Image1，覆盖它，但如果我运行下面的代码，该#divOverlayOverImage1元素将不再覆盖该#image1元素。
$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
I want to have an eventthat notifies me when #image1changes its position, so I can update the position of #divOverlayOverImage1.
我希望有一个事件在#image1更改其位置时通知我，以便我可以更新#divOverlayOverImage1.
NOTE:I do not have full control over the dom. the $("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');command is run by a third party.
注意：我不能完全控制 dom。该$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');命令由第三方运行。
UPDATE:I do not have full control of the DOM, so I cannt put a callback to the element add function, as it is not me making this call. Also, I cannot modify HTML like crazy. I just come to a set of websites, append and overlay to a specific image throung JavaScript and that's it. There are other competitiors that change the HTML as well.
更新：我不能完全控制 DOM，所以我不能对元素添加函数进行回调，因为不是我在做这个调用。另外，我不能像疯了一样修改 HTML。我只是来到一组网站，通过 JavaScript 附加和覆盖特定图像，就是这样。还有其他竞争对手也改变了 HTML。
回答by Zim84
If you have full control over the DOM, and I assume you have, you can add a call to every change you make in the DOM that will affect that <span>.
如果您拥有对 DOM 的完全控制权，并且我假设您已经拥有，那么您可以向您在 DOM 中所做的会影响该 DOM 的每个更改添加一个调用<span>。
function yourFunction() {
$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
updateMyOverlayPosition();
}
if that doesnt work, you might try this one here: Detect changes in the DOM
如果这不起作用，你可以在这里尝试这个：检测 DOM 中的变化
edit
编辑
if you want events:
如果你想要事件：
$('#image').on('adjustOverlay',function(e) {
// adjust the position of the overlay
}
$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
$('#image').trigger('adjustOverlay', {extra: "info", some: "parameters"});
edit2
编辑2
Since you don't have full control over changes in the DOM and you can get surprised you can either go with the link I already provided above orcheck in an interval if the overlay is still where it needs to be. This doesn't solve the problem in the way you want it, but there is no native event on DOM-changes, so you have to stick with some sort of work-around.
由于您无法完全控制 DOM 中的更改，因此您可能会感到惊讶，您可以使用我上面已经提供的链接，或者如果叠加层仍然在需要的位置，则检查一个时间间隔。这并没有以您想要的方式解决问题，但是没有关于 DOM 更改的本机事件，因此您必须坚持某种变通方法。
var checkTime = 100; //100 ms interval
var check = setInterval(function() {
// adjust overlay position
}, checkTime);
edit3
编辑3
next possible solution: if you know how affecting code is inserted in the DOM, you can try to change that method so that it always runs your adjustOverlayPosition()or fires an event, if you like events. Example: if it is inserted with jQuery's .after()you can modify that function:
下一个可能的解决方案：如果您知道如何将影响代码插入 DOM，您可以尝试更改该方法，以便它始终运行您的adjustOverlayPosition()或触发事件，如果您喜欢事件。示例：如果它是用 jQuery 插入的，.after()您可以修改该函数：
jQuery.fn.extend({
// since the .after() function already exists, this will
// actually overwrite the original function. Therefore you need
// the exact code that was originally used to recreate it.
after: function() {
return this.domManip( arguments, function( elem ) {
if ( this.parentNode ) {
this.parentNode.insertBefore( elem, this.nextSibling );
}
// call the function directly
adjustOverlayPosition();
// or call an event
$('#image').trigger('adjustOverlay', {extra: "info", some: "parameters"});
}
});
Drawback:this solution can be risky and works only if you know the code that is used originally. So it would also depend on the jQuery version.
缺点：此解决方案可能存在风险，并且仅当您知道最初使用的代码时才有效。所以它也取决于 jQuery 版本。
回答by Abhitalks
One workaround is to reorganize your layout. Wrap your image and overlay into a div. That way they will always remain that way.
一种解决方法是重新组织您的布局。将您的图像包裹起来并叠加到一个 div 中。那样他们将永远保持那样。
<div id="wrap">
<img id="i1" src="..." />
<div id="overlay" />
</div>
#wrap {
position: relative;
width: 400px;
height: 200px;
}
#overlay {
position: absolute;
top: 100px;
left: 40px;
width: 400px;
height: 200px;
}
回答by Akhil Sekharan
If wrapping the img with a ovelay is only your requirement, I think you can go with a pure css Solution:
如果用 ovelay 包裹 img 只是您的要求，我认为您可以使用纯 css 解决方案：
HTML
HTML
<p id="milestone1">
First Overlay
</p>
<div class="img-overlay-container" style="width:400px;height:200px;">
<img id="image1" src="blabla.jpeg"/>
<div id="overlay1" onclick="alert('clicked');">
</div>
</div>
<p id="milestone2">
Second Overlay
</p>
<div class="img-overlay-container" style="width:100px;height:400px;">
<img id="image2" src="blabla.jpeg"/>
<div id="overlay2" onclick="alert('clicked');">
</div>
</div>
CSS
CSS
.img-overlay-container{
position: relative;
display:inline-block;
}
.img-overlay-container > img{
}
.img-overlay-container > div{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background: rgba(3,3,3,.1);
}
回答by Deepak Biswal
function changePosition(callback) {
$("#milestone1").after('<div style="width:500px; height:500px; background-color:blue;">');
callback();
}
Then you can call changePosition(function() {// Add your event handler function}).
然后就可以调用了changePosition(function() {// Add your event handler function})。
Hope this will help you!
希望能帮到你！
