Contenteditable 不会专注于左键单击，而是专注于右键单击。为什么？我做错了什么。我认为是因为事件冒泡，如果是，那我该怎么办。
$(function() {
$("#textTemplate").draggable({
zIndex: 2500,
helper: 'clone',
});
$("#editorDesignView").droppable({
accept: '#textTemplate',
drop: function(event, ui) {
var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;">Add your text here.</p></div>';
$(html).appendTo(this).hide().slideDown();
var currentHtml = $("#editor").val();
$("#editor").val(currentHtml + html);
}
});
$('#editorDesignView').sortable();
});* {
box-sizing: border-box;
}
#wrapper {
width: 100%;
height: 610px;
}
#templateWrapper {
width: 30%;
height: 100%;
float: left;
overflow-y: scroll;
}
#editorBlock {
width: 70%;
height: 100%;
float: left;
position: relative;
background-color: #f1f1f1
}
#editorDesignView {
width: 100%;
height: 100%;
}
#switch {
background: #333;
border: 1px solid #333;
padding: 5px 20px;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
#switch.active {
background: #0091e1;
border: 1px solid #0091e1;
}<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="templateWrapper">
<div id="textTemplate" class="template">
<div>Text</div>
</div>
</div>
<div id="editorBlock">
<div id="editorDesignView"></div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>最佳答案
如果一个元素同时是draggable和 contenteditable编辑可能有一些问题。
添加 onclick='$(this).focus();' 使其工作
$(function() {
$("#textTemplate").draggable({
zIndex: 2500,
helper: 'clone',
});
$("#editorDesignView").droppable({
accept: '#textTemplate',
drop: function(event, ui) {
var html = '<div id="" style="background: #eee; width: 80%; margin: 10px auto; padding: 10px;"><p contenteditable="true" style="padding: 5px;" onclick="$(this).focus();">Add your text here.</p></div>';
$(html).appendTo(this).hide().slideDown();
var currentHtml = $("#editor").val();
$("#editor").val(currentHtml + html);
}
});
$('#editorDesignView').sortable();
});* {
box-sizing: border-box;
}
#wrapper {
width: 100%;
height: 610px;
}
#templateWrapper {
width: 30%;
height: 100%;
float: left;
overflow-y: scroll;
}
#editorBlock {
width: 70%;
height: 100%;
float: left;
position: relative;
background-color: #f1f1f1
}
#editorDesignView {
width: 100%;
height: 100%;
}
#switch {
background: #333;
border: 1px solid #333;
padding: 5px 20px;
color: #fff;
font-size: 1.5em;
float: right;
cursor: pointer;
}
#switch.active {
background: #0091e1;
border: 1px solid #0091e1;
}<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="templateWrapper">
<div id="textTemplate" class="template">
<div>Text</div>
</div>
</div>
<div id="editorBlock">
<div id="editorDesignView"></div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>关于javascript - contenteditable 在左键单击时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43994412/