callstack - 使用 innerHTML 后，我的可拖动元素没有移动

Question

我制作了一个可拖动的圆圈并使用 javascript 生成了一个 div 标签，但之后该圆圈没有拖动并且错误是：Uncaught RangeError: Maximum call stack size exceeded at HTMLDivElement.onmousedown ((index):53)。

我的 JAVASCRIPT：

var player = document.getElementById('player')
var players = document.getElementById('player').style

players.top = "85%"
players.left = "50%"

var playerx = parseInt(document.getElementById('player').style.left)
var playery = parseInt(document.getElementById('player').style.top)
var playerxs = document.getElementById('player').style.left
var playerys = document.getElementById('player').style.top
var body = document.getElementById('body')
var bodyx = body.getBoundingClientRect().width
var bodyy = body.getBoundingClientRect().height

//var cursorx = event.clientX;
//var cursory = event.clientX;

player.onmousedown = whiledrag;

function whiledrag() {
document.onmouseup = stopplayerdrag
document.onmousemove = playerdrag
}

function playerdrag() {
var cursorx = event.clientX
var cursory = event.clientY
players.left = cursorx + "px";
players.top = cursory + "px";
}

function stopplayerdrag() {
document.onmouseup = null
document.onmousemove = null
}

player.addEventListener('touchmove', function(e) {
var touchLocation = e.targetTouches[0]
var touchx = touchLocation.pageX;
var touchy = touchLocation.pageY;
players.left = touchx + "px"
players.top = touchy + "px"
})

document.getElementById('body').innerHTML += '<div class="trash"></div>';
document.getElementsByClassName('trash')[0].style.left = 2 + "px";

标签： callstackexceed