我做了一个示例聊天，但我不明白为什么不在 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>
1 回答
三国纷争
TA贡献1804条经验 获得超7个赞
您只需检查您的样式表规则，相应地删除或检查您的 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>
添加回答
举报
0/150
提交
取消