Нажав на кнопку, добавленную JavaScript, щелкните ее также

Question

Я работаю над скриптом, который добавляет кнопку, которая плавает поверх миниатюры фотографий профиля пользователя Facebook.

Вот скриншот:

Эта кнопка, при нажатии возвращает Facebook ID профиля, который в настоящее время рассматривается в строке. Эта часть работает нормально (но вам нужно будет войти в систему и просмотреть профиль, кроме вашего, иначе будет отсутствующий элемент).

Скриншот:

Что меня, хотя беспокоит, после нажатия на кнопку и нажав кнопку Отмена или Окей в командной строке, нажмите на самом деле проходит через кнопку и нажимает на изображение профиля сам эскиз. Один клик нажимает на оба элемента!

Есть ли способ сделать это так, чтобы область под самой кнопкой не была нажата? Но остальное изображение профиля?

Я пробовал поиск по этой теме, но не смог найти много результатов. Даже если я попытаюсь найти что-то вроде «Добавить прописку ниже/под кнопкой JavaScript», я получаю заполнение вокруг кнопки, а не прямо под ней в точке оси z.

Вот код сценария, вы можете скопировать его прямо в консоль. То есть, если у вас есть учетная запись Facebook и вы вошли в систему. Также это работает только на профилях, кроме ваших (иначе data-profileid будет отсутствовать).

// Create the button 
var btn = document.createElement("BUTTON"); 
var t = document.createTextNode("FBID"); // To replace with icon 
btn.appendChild(t); 

// Add a listener 
btn.addEventListener("click", getFBID); 

// Styling (positioning) 
btn.style.display="block"; 
btn.style.position="absolute"; 
btn.style.top="4px"; 
btn.style.right="4px"; 

// Function to get Facebook ID 
function getFBID() { 
    prompt("Copy it:", document.querySelectorAll("[data-profileid]")[0].getAttribute("data-profileid")); 
} 

// Append button to profile picture 
document.getElementsByClassName("profilePicThumb")[0].appendChild(btn); 

Ах да, я чувствую, что причина, почему это происходит потому, что я добавление к ссылке на якорь. На всякий случай эта информация была бы полезна.

Любая помощь приветствуется, спасибо!

Answer 1

Попытка предотвратить действия по умолчанию для мыши, как это:

btn.addEventListener("click", function(event){ 
    event.preventDefault(); 
    event.stopPropagation(); 
    getFBID(); 
    return false; 
}); 

EDIT: используйте event.stopPropagation();

(сравните эту тему How to stop event bubbling on checkbox click)

Answer 2

Попробуйте

// Create the button 
var btn = document.createElement("BUTTON"); 
var t = document.createTextNode("FBID"); // To replace with icon 
btn.appendChild(t); 

// Add a listener 
btn.addEventListener("click", getFBID); 

// Styling (positioning) 
btn.style.display="block"; 
btn.style.position="absolute"; 
btn.style.top="4px"; 
btn.style.right="4px"; 

// Function to get Facebook ID 
function getFBID() { 
    prompt("Copy it:", document.querySelectorAll("[data-profileid]")[0].getAttribute("data-profileid")); 
    return false;     // Try returning false here.. 
} 

// Append button to profile picture 
document.getElementsByClassName("profilePicThumb")[0].appendChild(btn); 

getFBID в этом случае обратного вызова для события, которое возникает на нажатие кнопки. return false будет следить за тем, чтобы событие не было передано его родительскому объекту и, следовательно, не вызвало бы событие родителя или не вызвало бы обработчик событий.