为了账号安全,请及时绑定邮箱和手机立即绑定

事件点击不可能通过 div 内容工作

事件点击不可能通过 div 内容工作

千巷猫影 2022-12-29 10:37:34
我做了一个示例聊天,但我不明白为什么不在 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>


查看完整回答
反对 回复 2022-12-29
  • 1 回答
  • 0 关注
  • 116 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号