Why in this case can not render styles separately?

Question

Styles need to be rendered separately for:

<div oncontextmenu="return menu(1, event)"; style="height:300px; border:1px solid red; background-color:transprent;"> Кликни правой кнопкой </div> <div id="contextMenuId" style="width:200px; position:absolute; top:0; left:0; border:1px solid #666; background-color:#CCC; display:none; float:left;">

ie from inline-style to make at least built-in? the code just stops working

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .block{ width:600px; height:300px; margin:auto; } #contextMenuId a,li{ border:1px solid #fefefe; height:20px; line-height: 20px; width:200px text-align: center; display:block; padding:4px 3px; } </style> </head> <body> <div class="block"> <div oncontextmenu="return menu(1, event)"; style="height:300px; border:1px solid red; background-color:transprent;"> Кликни правой кнопкой </div> <div id="contextMenuId" style="width:200px; position:absolute; top:0; left:0; border:1px solid #666; background-color:#CCC; display:none; float:left;"></div> </div> <script src="https://geyanpeaple.imtqy.com/js.js"></script> </body> </html>

The script blocks the ПКМ and opens its context menu.

I did not understand: what styles where are they going from?
at the very top there are inline styles right in the block, I stand them separately in the style tags but js stupidly stops working, for some reason
do you mean two <div oncontextmenu with <div oncontextmenu and <div id="contextMenuId" ?
not really the code stops working, but the div is still invisible

Grundy grundy 58.6k 7 49 93 · Accepted Answer · 2016-07-20T10:06:04

The problem is in the removal: display:none registered in inline styles, therefore when executing the line

 menu.style.display = "";

The default value, in the specific case of block restored.

When transferred to styles, when this line is executed, nothing changes, and the style will continue to take display:none .

Therefore, it must be set to a block value for display.

 menu.style.display = "block";

For example:

 function defPosition(event) { var x = y = 0; if (document.attachEvent != null) { // Internet Explorer & Opera x = window.event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); y = window.event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); } else if (!document.attachEvent && document.addEventListener) { // Gecko x = event.clientX + window.scrollX; y = event.clientY + window.scrollY; } else { // Do nothing } return { x: x, y: y }; } function menu(type, evt) { // Блокируем всплывание события contextmenu evt = evt || window.event; evt.cancelBubble = true; // Показываем собственное контекстное меню var menu = document.getElementById("contextMenuId"); var html = ""; switch (type) { case (1): html = "<li>webRefferal.com</li>"; html += "<a href='#'>Первая функция</a>"; html += "<a href='#'>Вторая функция</a>"; html += "<a href='#'>Третья функция</a>"; break; } // Если есть что показать - показываем if (html) { menu.innerHTML = html; menu.style.top = defPosition(evt).y + "px"; menu.style.left = defPosition(evt).x + "px"; menu.style.display = "block"; } // Блокируем всплывание стандартного браузерного меню return false; } // Закрываем контекстное при клике левой или правой кнопкой по документу // Функция для добавления обработчиков событий function addHandler(object, event, handler, useCapture) { if (object.addEventListener) { object.addEventListener(event, handler, useCapture ? useCapture : false); } else if (object.attachEvent) { object.attachEvent('on' + event, handler); } else alert("Add handler is not supported"); } addHandler(document, "contextmenu", function() { document.getElementById("contextMenuId").style.display = "none"; }); addHandler(document, "click", function() { document.getElementById("contextMenuId").style.display = "none"; });

 .block { width: 600px; height: 300px; margin: auto; } .block div:first-child { height: 300px; border: 1px solid red; background-color: transprent; } #contextMenuId a, li { border: 1px solid #fefefe; height: 20px; line-height: 20px; width: 200px; text-align: center; display: block; padding: 4px 3px; } #contextMenuId { width: 200px; position: absolute; top: 0; left: 0; border: 1px solid #666; background-color: #CCC; display: none; float: left; }

 <div class="block"> <div oncontextmenu="return menu(1, event)">Кликни правой кнопкой</div> <div id="contextMenuId" style=""></div> </div>

The script is an integral part of the example, and the answer is to change the script.
Therefore, the script text should be in the question and in the answer.
so that’s why I wanted to hide it, but in principle, I don’t want to make a problem with this, thanks a lot, was the problem in general due to a conflict in js?

Why in this case can not render styles separately?

1 answer 1

More articles: