聊天框js+鼠标悬停+回调(递归)函数
一、鼠标右击或悬停事件
1.梳理思路+实现功能
(1) 业务：
给工作台聊天框中访客发送的消息添加“鼠标悬停在上面，触发事件”；
(2) 思路：
首先在本地搞个小程序测试下鼠标悬停的实现方法，看看实现代码怎么写；
第二步，业务：在前端页面F12，找到要添加事件的div叫什么名字(div的class/id等相关信息)；确定后回到代码中worker.js,可搜索该div出现在哪些地方，ctrl+shift+R全局搜索；此时可大概理清业务关于消息框的逻辑， worker.js工作台三个消息打包function：
a. 访客发来消息，worker接收，并展示在页面；
b. 工作台客服发送文字给访客，消息打包function通过huaweiMessage发送给访客；
c. 历史记录消息打包function展示;
找到应该修改的对应位置；
第三步，添加功能：此时可console.log("") 或alert("")，相当于后端print，看看代码走到哪了；实现功能，ok！！
2.专业知识
鼠标悬浮触发事件（onmouseover）实现，就在div里面添加即可，是div一个属性，可以让它指向一个自定义函数，即添加自定义鼠标悬浮事件。
js对某个div添加指定右键信息的方法代码
1、鼠标事件有一个botton属性：返回一个整数，用于表示点击的是哪个鼠标按键。
BUG：在IE和标准DOM的鼠标事件中，唯一一个button属性值相同的是“单击右键”事件，都返回2。
2、事件onmousedown：表示鼠标按键按下的动作。
事件oncontextmenu：点击鼠标触发的另一个事件。
3、中断默认事件处理函数的方法：IE中设置returnValue=false; 标准DOM中调用preventDefault()方法。
参考：http://www.cuplayer.com/player/PlayerCodeJS/2017/1024/3208.html
if (msg.msgType == "text") {
************"" + (msg.sendType == "1" ? worker.filterWord(msg.msgId, content) : content) + ""
*********** " myFunction: function (msgId) { //
alert("你在 div 元素上点击鼠标了右键。");
},
3.参考示例
下面是我做时参考的两个小例子：
方法一：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="cl" oncontextmenu="myFunction()">点击鼠标右键触发js事件</div>
<script>
function myFunction() {
alert("你在 div 元素上点击鼠标了右键。");
}
</script>
</body>
</html>
方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button class = "btn1" oncontextmenu="myClick()">点击我右击</button>
<script type="text/javascript">
//这一步是为了阻止右击时系统默认的弹出框
function myClick(){
document.getElementById("btn1").oncontextmenu = function(e){
e.preventDefault();
};
//在这里你就可以自己定义事件的函数啦
document.getElementById("btn1").onmouseup=function(oEvent) {
if (!oEvent) oEvent=window.event;
if (oEvent.button==2) {
console.log('鼠标右击了')
}
};
}
</script>
</body>
</html>
4.聊天框+鼠标右击例子
参考【1】：js实现简易聊天对话框https://blog.csdn.net/h5_since/article/details/89944616
参考【2】：聊天框里发送图片https://blog.csdn.net/munger6/article/details/53494523
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:300px;
height:400px;
border:1px solid blue;
margin:0 auto;
}
.inTer{
width:280px;
height:280px;
border:1px solid deeppink;
margin:0 auto;
margin-top:10px;
overflow-y:auto;
}
textarea{
display:block;
width: 276px;
height:65px;
margin:0 auto;
margin-top:5px;
}
#btn{
display:block;
float:right;
margin-right:10px;
margin-top:5px;
}
p{
display:inline-block;
border-radius:5px;
background:#dcdcdc;
font-size:12px;
padding:5px 5px;
margin:5px 0;
margin-left:5px;
max-width:140px;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="box">
<div class="inTer" id="father">
<p>你好</p ></br>
<p>你好</p ></br>
<p>你好</p ></br>
<p>heiheiheiheiehieheieheieheieheiheiehe</p ></br>
</div>
<textarea style="resize: none;" id="txt">
</textarea>
<input type="button" id="btn" value="发送" />
</div>
</body>
</html>
<script>
var btn = document.getElementById("btn");
var txt = document.getElementById("txt");
var p = document.getElementsByTagName("p");
btn.onclick=function(){
if(txt.value==""){
alert("请勿发送空内容");
}
else{
var son = document.createElement("p");
son.style.backgroundColor="yellowgreen";
son.style.clear="both";
son.style.float="right";
son.style.marginRight="5px";
son.innerText=txt.value;
console.log("father="+father);
console.log("father="+father.id);
console.log("son="+son);
father.appendChild(son);
txt.value="";
son.scrollIntoView();
}
}
//这一步是为了阻止右击时系统默认的弹出框
document.getElementById("father").oncontextmenu = function(e){
e.preventDefault();
};
//在这里你就可以自己定义事件的函数啦
document.getElementById("father").onmouseup=function(oEvent) {
if (!oEvent) oEvent=window.event;
if (oEvent.button==2) {
console.log('鼠标右击了')
}
}
</script>
实现效果图：
二、调用“通用多媒体图文知识渲染js”
- 引入js文件；
- 看功能，肯定要video回调，看看是否需要换一换回调；若需要，则应该加请求数据的函数；
若传来的是一条数据，默认没有换一换按钮；若传来三条数据，默认有换一换按钮；关于回调，就是个函数递归算法，自己调用自己；onChangeHandel: function(){ sendMessage();其中，onChangeHandel:在sendMessage();里面； - 对应位置添加图文渲染；