Как сделать элемент HTML перетаскиваемым, не вызывая его onClick? [закрыто] ⇐ CSS

[Anonymous]

Мне нужно сделать виджет чата подвижным. Этот виджет чата внедряется внешним скриптом (в частности, встроенной службой SFDC). Следовательно, у меня нет доступа к обработчикам кликов виджета чата.
В настоящее время я использую обработчики событий встроенной службы для прикрепления «mousedown», «mouseup» и «mousemove». прослушиватели событий виджета чата, чтобы сделать его подвижным.
Хотя виджет можно перемещать путем перетаскивания, при наведении курсора мыши также запускается событие щелчка мышью и чат активируется.Могу ли я избежать запуска события щелчка мышью, учитывая внешний характер виджета?
Я также использую реакцию, если это имеет значение.
Виджет чата также прикрепляется непосредственно к телу документа с помощью сценария Salesforce, поэтому о контейнере не может быть и речи.
HTML:

// external script that adds chat widget


грубое представление esw.min.js:
const chatWidget =
chatWidget.addEventListener('click', openChat)
document.querySelector('body').append(chatWidget) // adds chat widget into body

мой код:
const widgetObserver = new MutationObserver((mutations, observer) => {
const helpButton = document.querySelector('chat-widget');

if (helpButton) {
!helpButton.draggable && enableDragging(helpButton);
observer.disconnect();
}
});

function enableDragging(element) {
var displacedX = 0,
displacedY = 0,
currentX = 0,
currentY = 0;
// otherwise, move the DIV from anywhere inside the DIV:
element.onmousedown = dragMouseDown;
element.style.right = currentX + 'px';
element.style.bottom = currentY + 'px';
element.draggable = true;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
currentX = e.clientX;
currentY = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}

function elementDrag(e) {
e.preventDefault();
// calculate the new cursor position:
displacedX = currentX - e.clientX;
displacedY = currentY - e.clientY;
currentX = e.clientX;
currentY = e.clientY;
// set the element's new position:
element.style.top = element.offsetTop - displacedY + 'px';
element.style.left = element.offsetLeft - displacedX + 'px';
}

function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
}


Подробнее здесь: https://stackoverflow.com/questions/783 ... ts-onclick