事件点击不可能通过 div 内容工作
我做了一个示例聊天，但我不明白为什么不在 div 内容上运行链接或按钮交互。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
</head>
<body>
<script>
var avatar = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=userimage@1@4@7FD66E9B1F9F486D8C95";
var nphoto = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=dataimage_jpeg@1@4@C661281C60B847759EEB";
var nvideo = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=datavideo_mp4@1@4@4F5D6E742634422DAF2B";
var nlocation = "location@1@4@314123992DA4406CAA7F";
var ndocument = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=04contrachequeintranetperbras_pdf@1@4@7168A9C3138745E99F3C";
var naudio = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=dataaudio_ogg@1@4@16CC8FAD9C8A469A8125";
var latlon = "-10.9498287,-37.0654272";
</script>
<div id="chat"></div>
</body>
</html>
千巷猫影浏览 117回答 1
1回答
-
三国纷争
您只需检查您的样式表规则，相应地删除或检查您的 z-index，z-index 到 -1 使您的 div 不可点击，如果有具有更大 z-index 的元素，那么标记中的 onclick 处理程序中有一些拼写错误，它应该是 onclick 而不是 nclick。<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Chat</title> <style> html { /* box-sizing: border-box;*/ height: 100%; margin: 0; padding: 0;}body { /*-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Roboto", sans-serif;*/ margin: 0; padding: 0; height: 100%;}.chat { height: calc(100% - 48px); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 0.9em !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; font-weight: normal !important;}*,*:before,*:after { box-sizing: inherit;}.chat-container { height: 100%;}.user-bar { height: 55px; background: #005e54; color: #fff; padding: 0 8px; font-size: 24px; position: relative; /* z-index: 1; */}.user-bar:after { content: ""; display: table; clear: both;}.user-bar div { float: left; transform: translateY(-50%); position: relative; top: 50%;}.user-bar .actions { float: right; margin: 0 0 0 20px;}.user-bar .actions.more { margin: 0 12px 0 32px;}.user-bar .actions.attachment { margin: 0 0 0 30px;}.user-bar .actions.attachment i { display: block; transform: rotate(-45deg);}.user-bar .avatar { margin: 0 0 0 5px; width: 46px; height: 46px;}.user-bar .avatar img { border-radius: 50%; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); display: block; width: 100%;}.user-bar .name { font-size: 17px; font-weight: 600; text-overflow: ellipsis; letter-spacing: 0.3px; margin: 0 0 0 8px; overflow: hidden; white-space: nowrap; width: 80%;}.user-bar .status { display: block; font-size: 13px; font-weight: 400; letter-spacing: 0;}.conversation { height: calc(100% - 12px); position: relative; background: #efe7dd url("https://cloud.githubusercontent.com/assets/398893/15136779/4e765036-1639-11e6-9201-67e728e86f39.jpg") repeat; z-index: 0;}.conversation ::-webkit-scrollbar { /* transition: all .5s; width: 5px; height: 1px; z-index: 10; */}.conversation ::-webkit-scrollbar-track { /* background: transparent; */}.conversation ::-webkit-scrollbar-thumb { background: #b3ada7;}.conversation .conversation-container { /*height: calc(100% - 68px);*/ height: 100%; /*box-shadow: inset 0 10px 10px -10px #000000;*/ overflow-x: hidden; padding: 0 16px; margin-bottom: 5px; pointer-events: auto;}.conversation .conversation-container:after { content: ""; display: table; clear: both;}.message { color: #000; clear: both; line-height: 18px; /*font-size: 15px;*/ padding: 8px; position: relative; margin: 8px 0; max-width: 85%; word-wrap: break-word; /* z-index: -1; */}.message:after { position: absolute; content: ""; width: 0; height: 0; border-style: solid;}.metadata { display: inline-block; float: right; padding: 0 0 0 7px; position: relative; bottom: -4px;}.metadata .time { color: rgba(0, 0, 0, .45); font-size: 11px; display: inline-block;}.metadata .tick { display: inline-block; margin-left: 2px; position: relative; top: 4px; height: 16px; width: 16px;}.metadata .tick svg { position: absolute; transition: .5s ease-in-out;}.metadata .tick svg:first-child { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: perspective(800px) rotateY(180deg); transform: perspective(800px) rotateY(180deg);}.metadata .tick svg:last-child { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: perspective(800px) rotateY(0deg); transform: perspective(800px) rotateY(0deg);}.metadata .tick-animation svg:first-child { -webkit-transform: perspective(800px) rotateY(0); transform: perspective(800px) rotateY(0);}.metadata .tick-animation svg:last-child { -webkit-transform: perspective(800px) rotateY(-179.9deg); transform: perspective(800px) rotateY(-179.9deg);}.message:first-child { margin: 16px 0 8px;}.message.received { background: #fff; border-radius: 0px 5px 5px 5px; float: left;}.message.received .metadata { padding: 0 0 0 16px;}.message.received:after { border-width: 0px 10px 10px 0; border-color: transparent #fff transparent transparent; top: 0; left: -10px;}.message.sent { background: #e1ffc7; border-radius: 5px 0px 5px 5px; float: right;}.message.sent:after { border-width: 0px 0 10px 10px; border-color: transparent transparent transparent #e1ffc7; top: 0; right: -10px;}.ChatConvHid { display: none !important;}.message-video { background: #000; border-radius: 5px;}.message-image { width: 320px; height: 320px; overflow: hidden; border-radius: 5px;}.message-audio {}.message-document {}.message-location {}.message-btn { background-color: #b3ada7; border: none; color: white; padding: 12px 16px; font-size: 16px; cursor: pointer; display: block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;}.message-btn:hover { background-color: #86817c;}@media (max-width: 768px) { .marvel-device.nexus5 { border-radius: 0; flex: none; padding: 0; max-width: none; overflow: hidden; height: 100%; width: 100%; } .marvel-device>.screen .chat { visibility: visible; } .marvel-device { visibility: hidden; } .marvel-device .status-bar { display: none; } .screen-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .conversation { height: calc(100vh - 55px); } .conversation .conversation-container { height: calc(100vh - 120px); }} </style> </head> <body> <script> var avatar = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=userimage@1@4@7FD66E9B1F9F486D8C95"; var nphoto = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=dataimage_jpeg@1@4@C661281C60B847759EEB"; var nvideo = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=datavideo_mp4@1@4@4F5D6E742634422DAF2B"; var nlocation = "location@1@4@314123992DA4406CAA7F"; var ndocument = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=04contrachequeintranetperbras_pdf@1@4@7168A9C3138745E99F3C"; var naudio = "http://sistemas.corcino.com.br:8020/somos/getfile.rule?sys=BOT&arquivo=dataaudio_ogg@1@4@16CC8FAD9C8A469A8125"; var latlon = "-10.9498287,-37.0654272"; </script> <div id="chat"></div> <script> var ChatCompMap = new Map(); function ChatComponente(c, ident, userimg, username) { let id = c + "_" + ident; if (!ChatCompMap.has(id)) ChatCompMap.set(id, { chat: c, user: ident }); else return; let chatdiv = document.getElementById(c); if (!chatdiv.classList.contains("chat")) { /* Requirement componentes */ var el = document.createElement("style"); el.innerHTML = ""; document.head.appendChild(el); el = document.createElement("link"); el.setAttribute("rel", "stylesheet"); el.setAttribute("crossorigin", "anonymous"); el.setAttribute( "href", "https://cdn.jsdelivr.net/gh/englishextra/img-lightbox@latest/img-lightbox.min.css" ); document.head.appendChild(el); el = document.createElement("script"); el.setAttribute( "src", "https://cdn.jsdelivr.net/gh/englishextra/img-lightbox@latest/img-lightbox.min.js" ); el.onload = function (e) { imgLightbox("img-lightbox-link"); }; document.head.appendChild(el); chatdiv.classList.add("chat"); } let nchatcontainer = document.createElement("div"); nchatcontainer.setAttribute("id", ident); nchatcontainer.setAttribute("class", "chat-container"); let nchatuserbar = document.createElement("div"); nchatuserbar.setAttribute("class", "user-bar"); let nchatconv = document.createElement("div"); nchatconv.setAttribute("class", "conversation"); let nchatconvcont = document.createElement("div"); nchatconvcont.setAttribute("class", "conversation-container"); let nchatavatar = document.createElement("div"); nchatavatar.setAttribute("class", "avatar"); let nchatname = document.createElement("div"); nchatname.setAttribute("class", "name"); nchatconv.append(nchatconvcont); nchatuserbar.append(nchatavatar); nchatuserbar.append(nchatname); nchatcontainer.append(nchatuserbar); nchatcontainer.append(nchatconv); chatdiv.append(nchatcontainer); let url = null; if (!userimg) userimg = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="; url = userimg; if (!username) username = "Usuário #" + ChatCompMap.size.toString(); let img = document.createElement("img"); img.src = url; let slct = "#" + c + " > #" + ident + " > div.user-bar > div.avatar"; let slctn = "#" + c + " > #" + ident + " > div.user-bar > div.name"; let obj = document.querySelector(slct); obj.append(img); obj = document.querySelector(slctn); obj.innerHTML = username; } function buildMessage(text, mode, h, file, mime) { var element = document.createElement("div"); element.classList.add("message", mode); //test onclick //element.setAttribute("onclick","alert(\'GGG\');"); var content = ""; if (mime === "image") { content = '<a href="' + file + '" class="img-lightbox-link" aria-hidden="true">' + '<div class="message-image" onclick="alert(\'tst\');">' + '<img src="' + file + '" style="margin: -50% -40%;"></div></a><a href="http://uol.com.br">Teste</a>'; } if (mime === "video") { content = '<video controls width="320" height="240" class="message-video"><source src="' + file + '" type="video/mp4">' + "Your browser does not support the video tag.</video><br>"; } if (mime === "audio") { /*var request = new XMLHttpRequest(); request.open('GET', file, true); request.responseType = 'blob'; request.withCredentials = false; request.onload = function() { var reader = new FileReader(); reader.readAsDataURL(request.response); reader.onload = function(e){ console.log('DataURL:', e.target.result); }; }; request.send();*/ content = '<audio controls autobuffer class="message-audio">' + '<source src="' + file + '" >' + "Your browser does not support the video tag.</audio><br>"; } if (mime === "location") { content = '<button class="message-btn" onclick="window.open(\'' + file + '\', \'_blank\');"><svg width="50" height="50" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="map-marked-alt" class="svg-inline--fa fa-map-marked-alt fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M288 0c-69.59 0-126 56.41-126 126 0 56.26 82.35 158.8 113.9 196.02 6.39 7.54 17.82 7.54 24.2 0C331.65 284.8 414 182.26 414 126 414 56.41 357.59 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.12 215.95A32.006 32.006 0 0 0 0 245.66v250.32c0 11.32 11.43 19.06 21.94 14.86L160 448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12 215.95zM288 359.67c-14.07 0-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192 64V266c-18.92 27.09-39.82 53.52-59.49 76.72-9.13 10.77-22.44 16.95-36.51 16.95zm266.06-198.51L416 224v288l139.88-55.95A31.996 31.996 0 0 0 576 426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z"></path></svg></br>Goole Maps</button>'; } if (mime === "document") { content = '<button class="message-btn" onclick="window.open(\'' + file + '\', \'_blank\');"><svg width="50" height="50" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="file-download" class="svg-inline--fa fa-file-download fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm76.45 211.36l-96.42 95.7c-6.65 6.61-17.39 6.61-24.04 0l-96.42-95.7C73.42 337.29 80.54 320 94.82 320H160v-80c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v80h65.18c14.28 0 21.4 17.29 11.27 27.36zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"></path></svg></br>Download</button>'; } element.innerHTML = content + text + '<span class="metadata">' + '<span class="time">' + h + "</span>" + '<span class="tick tick-animation">' + '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" id="msg-dblcheck" x="2047" y="2061"><path d="M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.88a.32.32 0 0 1-.484.032l-.358-.325a.32.32 0 0 0-.484.032l-.378.48a.418.418 0 0 0 .036.54l1.32 1.267a.32.32 0 0 0 .484-.034l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.88a.32.32 0 0 1-.484.032L1.892 7.77a.366.366 0 0 0-.516.005l-.423.433a.364.364 0 0 0 .006.514l3.255 3.185a.32.32 0 0 0 .484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z" fill="#92a58c"/></svg>' + '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" id="msg-dblcheck-ack" x="2063" y="2076"><path d="M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.88a.32.32 0 0 1-.484.032l-.358-.325a.32.32 0 0 0-.484.032l-.378.48a.418.418 0 0 0 .036.54l1.32 1.267a.32.32 0 0 0 .484-.034l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.88a.32.32 0 0 1-.484.032L1.892 7.77a.366.366 0 0 0-.516.005l-.423.433a.364.364 0 0 0 .006.514l3.255 3.185a.32.32 0 0 0 .484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z" fill="#4fc3f7"/></svg>' + "</span>" + "</span>"; return element; } function animateMessage(message) { setTimeout(function () { var tick = message.querySelector(".tick"); tick.classList.remove("tick-animation"); }, 500); } /* ------- novas funcoes ------------- */ function ChatComponentExist(c, ident) { let id = c + "_" + ident; return ChatCompMap.has(id); } function ChatNewMessage(c, ident, e, s, h, file, mime) { let id = c + "_" + ident; if (!ChatCompMap.has(id)) return; var conversation = document.querySelector( "#" + c + " > #" + ident + " > div.conversation > div.conversation-container" ); var input = e; //e.target.input; if (input || file) { var message = buildMessage(input, s, h, file, mime); conversation.appendChild(message); animateMessage(message); } conversation.scrollTop = conversation.scrollHeight; } function ChatComponentClear(c, ident) { let id = c + "_" + ident; if (!ChatCompMap.has(id)) return; const myNode = document.querySelector("#" + c + "> #" + ident); while (myNode.firstChild) { myNode.removeChild(myNode.lastChild); } myNode.remove(); ChatCompMap.delete(id); } function ChatComponentShow(c, ident, shw) { let id = c + "_" + ident; if (!ChatCompMap.has(id)) return; const myNode = document.querySelector("#" + c + "> #" + ident); if (!shw) { if (!myNode.classList.contains("ChatConvHid")) myNode.classList.add("ChatConvHid"); } else { if (!myNode.classList.contains("ChatConvHid")) myNode.classList.remove("ChatConvHid"); } } ChatComponente("chat", "paulo", avatar, "Paulo Corcino"); ChatNewMessage( "chat", "paulo", "Exemplo Texto", "sent", "8:00", null, null ); ChatNewMessage( "chat", "paulo", "Exemplo Texto Recebido", "received", "8:01", null, null ); ChatNewMessage( "chat", "paulo", "Exemplo Imagem", "received", "8:01", nphoto, "image" ); ChatNewMessage("chat", "paulo", "", "sent", "8:01", avatar, "image"); ChatNewMessage( "chat", "paulo", "Exemplo Video", "received", "8:01", nvideo, "video" ); ChatNewMessage( "chat", "paulo", "Exemplo Audio", "received", "8:01", naudio, "audio" ); ChatNewMessage( "chat", "paulo", "Exemplo Documento", "received", "8:01", ndocument, "document" ); ChatNewMessage( "chat", "paulo", "Exemplo Localização", "received", "8:01", latlon, "location" ); ChatComponentShow("chat", "paulo", true); //http://maps.google.com/maps?q=-10.9498287,-37.0654272&z18 //@-10.9498287,-37.0654272&z= </script> </body></html>
随时随地看视频慕课网APP
相关分类
JavaScript